vue学习笔记四

Vue学习笔记四

vue学习笔记一 

vue学习笔记二

vue学习笔记三

今天写个todolist， 在前几篇的基础上做的。需要的同学可以点击上面的链接；

在template文件夹下新建一个list.vue；

现在是空的，先写上一点假数据

data(){
    return{
        items:[             // 模拟一些数据
            {
                names:"Vue.js权威指南",   // 名称
                num:1,                   // 数量
                price:99                 // 单价 
            },
            {
                names:"MongoDB权威指南",
                num:1,
                price:67.2
            },
            {
                names:"图解HTTP",
                num:1,
                price:41.7
            },
            {
                names:"Node.js权威指南",
                num:1,
                price:75.7
            },
            {
                names:"Node.js项目实践",
                num:1,
                price:64.2
            }
        ],
        names:"",
        price:"",
        // showData:true,
        priceAll:0     //初始总价格为零
    }
},

在页面展示出来

我这里直接写了一个table

<table>
    <thead>
        <tr>
            <th width="10%">序号</th>
            <th width="30%">名称</th>
            <th width="30%">数量</th>
            <th width="10%">单价</th>
            <th width="10%">总价</th>
            <th width="10%">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in items">
            <td>{{index}}</td>
            <td>{{item.names}}</td>
            <td>
                <input type="button" value="-"  @click="minus(item)">
                    {{item.num}} 
                <input type="button" value="+" @click="push(item)">
            </td>
            <td>{{item.price}}</td>
            <td>{{item.price * 1000 * item.num / 1000}}</td>
            <td><span @click="deletes(index)">删除</span></td>
        </tr>
        <tr>
            <td>总价</td>
            <!-- 总价格  -->
            <td colspan="5">{{priceAll}}</td>
        </tr>
    </tbody>
</table>

style里写点样式

table{width:800px;border-collapse:collapse;}
th,td{border:1px solid #ccc;height:25px;line-height:25px;text-align:center}
input[type='button']{width:40px;height:20px;line-height:20px;}
span{cursor:pointer;font-size:12px}

现在我们把事件补上

methods:{

    //   增加事件
    push:function(item){
        item.num+=1;
    },

    //  减少事件
    minus:function(item){
        //  如果数量为零的话,不做操作
        if(item.num<=1) return false;
        item.num-=1;
    },

    //  删除事件
    deletes:function(index){
        this.items.splice(index,1)
    }
    
},

现在我们修改一下index.js；引入list

import list from './../../template/list.vue';

注册名字

new Vue({
  el:"#app",
  components: {"helloVue":helloVue,"list":list}
})

根目录的index.html文件加上标签

< list ></ list >

到这里我们基本上已经做了 一大部分的工作了。

打包测试一下

打包并刷新页面

基本功能已经实现了，数量加减的时候单总价会自动计算，删除功能也正常，但是总价并没有计算。 现在我们需要加上监听事件：

list.vue里面加上watch事件

watch:{
    // 监听items的变化
    "items":{
        deep:true,   //深度监听
        handler:function(){
            var num=0;

            //  遍历数组,
            this.items.forEach(function(v){

                //  把每个元素的数量和单价的乘积相加;  (注：这里*1000是为了处理浮点数运算的精度丢失)
                num+=v.price * 1000 * v.num;
            })

            //   如果num的计算结果为零的话,直接为 0; 否则加上符号与单位;
            num==0?
            this.priceAll=0:
            this.priceAll="$"+(num/1000).toFixed(2)+"元";    //将结束除以1000。还原数据;

            this.items.length==0?this.showData=false:this.showData=true;
        }
    }
}

再次打包并刷新:

总价已经可以自动更新了。

只有这些还不够，我们需要一个添加事件。

在table上面加上输入框。

<!--  名称输入框,绑定names -->
名称:<input v-model="names" placeholder="请输入名称"><br>
    <!--  单价输入框,绑定price -->
单价:<input v-model="price" placeholder="请输入单价"><br>

<!--  添加按钮  -->
<input type="button" value="添加" @click="add">

methods里面加上添加事件：

// 添加事件
add:function(){
    // 判断名称是否为空
    if(this.names.replace(/\s/g,"")==""){
        alert("名称不能为空");
        return false;
    }

    // 判断单价是否为空
        if(this.price.replace(/\s/g,"")==""){
        alert("单价不能为空");
        return false;
    }

    // 添加到数组
    this.items.push({"names":this.names,"price":this.price,"num":1});

    // 清空名称与单价
    this.names="";
    this.price="";
},

打包半刷新

ok,到这里一个简单的todolist已经完成。

如果过程中有什么不对的地方，欢迎大家指出。