Vue-表单事件

1. 效果图

image.png

2. 实现代码

css

<style type="text/css">
    #app{
        width: 60%;
        margin: 10px auto;
    }
    .inp{
        margin-bottom: 30px;
    }
    .inp input{
        width: 30%;
        height: 35px;
        line-height: 35px;
        padding-left: 4px;
    }
    td{
        text-align: center;
    }
    td span{
        cursor: pointer;
    }
    .total td{
        text-align: right;
        padding-right: 20px;
    }
    .selAll{
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #eee;
        cursor: pointer;
        text-align: center;
        line-height: 35px;
        display: inline-block;
        margin: 0 3px;
    }
</style>

html

用到的属性：v-model , .trim , .number , @click , (val,index) in arr , @change

<div id="app">
    <div class="inp">
        <input type="text" v-model.trim="goodsName" placeholder="请输入商品名称" />
        <input type="number" v-model.number="goodsPrice" placeholder="请输入价格" />
        <button @click="add">添加</button>
    </div>
    <table border="1" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <th><span @click="all" class="selAll">全选</span> 名称</th>
            <th>单价(元)</th>
            <th>数量</th>
            <th>总价(元)</th>
            <th>操作</th>
        </tr>
        <tr v-for="(val,index) in arr">
            <td><input v-model="val.isCheck" @change="sel" type="checkbox" /> {{val.name}}</td>
            <td>{{val.price}}</td>
            <td><span @click="reduce(index)">-</span> {{val.count}} <span @click="plus(index)">+</span></td>
            <td>{{(val.price*val.count).toFixed(2)}}</td>
            <td @click="del(index)">删除</td>
        </tr>
        <tr class="total">
            <td colspan="5">总价格：{{allPrice}}</td>
            <!--<td colspan="5">总价格：{{total.toFixed(2)}}</td>-->
        </tr>
    </table>
</div>

javascript

$set

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    //数据驱动视图
    var vm = new Vue({
        el:"#app",
        data:{
            goodsName:"白菜",
            goodsPrice:16,
            arr:[],
            obj:{},
            total:0
        },
        methods:{
            add(){//增加条目
                this.obj = {
                    isCheck:false,//设置条目未选中
                    name:this.goodsName,//设置v-model 的绑定值
                    price:this.goodsPrice,//设置v-model 的绑定值
                    count:1,//设置数量为1
                    totalPrice:1*parseInt(this.goodsPrice)//设置1件的总价
                }
                vm.$set(vm.arr,vm.arr.length,vm.obj);
            },
            reduce(index){//减少商品数量
                if(this.arr[index].count>0){            
                    this.arr[index].count--;
                    //this.sel();
                }
            },
            plus(index){//增加商品数量
                this.arr[index].count++;
                //this.sel();
            },
            del(index){//删除条目
                this.arr.splice(index,1);
                //this.sel();
            },
            sel(){//计算选择到的商品的总价格 --- 将计算总价函数放在methods中，
                    //就需要在每个函数中再调用下这个函数，比较麻烦，所以放在computed里
//                      this.total = 0;
//                      for(var i=0;i<this.arr.length;i++){
//                          if(this.arr[i].isCheck){                                
//                              var {count,price} = this.arr[i];
//                              this.total+=count*price;
//                          }
//                      }
            },
            all(){//全选
                var res = this.arr.every(val=>{
                    return val.isCheck;
                })//是否每个都被选中
                this.arr.forEach(val=>{
                    if(res){
                        val.isCheck = false;                                
                    }else{
                        val.isCheck = true; 
                    }
                })
            }
        },
        computed:{ //计算属性  
            allPrice(){//计算选中商品的总价格 ---- 放在计算属性中就不需要在每个函数中都调用一次
                var total = 0;//每次重置为0
                for(let i=0;i<this.arr.length;i++){
                    if(this.arr[i].isCheck){//遍历被选中的才进入计算
                        let {count,price} = this.arr[i];
                        total += count*price;
                    }
                }
                return total.toFixed(2);
            }
        }
    })
</script>

3. 思路：

1.监听input复选框是否改变 --- 用@change : 当改变时执行函数；
2.判断全选 --- 用数组属性的方法，every 的返回值  用于判断 foreach 执行数组中每一个元素；
3.(val,index) in arr 中的 val 可以是一个对象，所以要取到对象里面的键名键值用 点.来选择
   这里添加条目的 val 要写在相应函数 里面的数据中，而不是随便放在 实例化vue父组件 的data里面的；
4.input type="checkbox" 中绑定的v-model的值  为true即是勾选，false则未勾选， 
   v-model="val.isCheck" 即是arr 里面元素中的对象的一个键值名的值。