标签：vue false name price js 全选 num id

全选功能：

1.首先想要实现全选的功能我们就需要初始全选的状态，这里用到了html中表单的内容：复选框（checkbox）。

2.我们要给全选来初始化状态（变量名：false）同时给原有的数据都要初始状态：比如（{tai:false,id:1,name:"苹果",price:8,num:10}），红色的false就是状态，false：是错误的意思，在Vue中是没有选定的意思。

3.接下来我们就需要去用指令v-model去双向绑定状态。

<input type="checkbox" v-model="初始状态变量名" @change="事件名">

4.同时要给全选绑定事件，这里不用v-on：click的原因是它有延迟，切记要用到：change。

5.事件要写在：methods里面，如果数据不止一条的话，就需要用js中的for循环出数组里的所有数据的状态，与全选的状态进行赋值：

 

for(var i=0;i<this.shu.length;i++){                 this.shu[i].数组里状态变量名 = this.全选状态变量名             } 切记是一个=号，如果写==就不会出来效果。

 

当把所有的选项都选择了，这时候也属于全选，全选就要自动选择上：

1.我要在数组里的复选框添加事件的（v-on：click="事件名"）

2.先需要定义一个长度初始值，用来记录数组里的数据状态是否等于true：是对的意思，在Vue中是指选定的意思。

3.同时也是用到了for循环，循环出每一个数据的状态与true进行对比，如果如果相等则长度初始值++，++的意思是+1。

4.在进行判断当长度初始值的长度等于整个数组的长度时，这时也是全选了，直接给全选赋值（true）否则就是（false）

下面有我写的：（购物车综合案例）有关全选的例题代码（提供参考）：

<template>   <div>       <h3>购物车综合案例</h3>       <!-- 以表格的形式渲染出来： -->       <table border="1px" width="800" cellspacing="0px" align="center">           <tr>               <!-- 全选：  绑定状态：绑定事件：-->               <td><b>全选<input type="checkbox" v-model="quan" @change="all"></b></td>               <td><b>编号</b></td>               <td><b>商品名</b></td>               <td><b>单价</b></td>               <td><b>数量</b></td>               <td><b>编辑</b></td>           </tr>           <!-- 把数据渲染出来liyongv-for -->           <tr v-for="(value,i) in shu" :key="i">               <!-- 绑定状态 -->               <td><input type="checkbox" v-model="value.tai" @change="call"></td>               <td>{{value.id}}</td>               <td>{{value.name}}</td>               <td>{{value.price}}</td>               <td>                   <button @click="value.num++">+</button>                   {{value.num}}                   <button @click="value.num>0?value.num--:value.num">-</button>                 </td>               <td><button @click="del(i)">删除</button></td>           </tr>           <tr>               <td colspan="6">总价:{{qq}}</td>           </tr>       </table><br>       <!--要添加的样式： -->         添加商品信息<br><br>         <!-- 进行双向绑定： -->         编号：<input type="text" v-model="ja.id"><br><br>         商品名：<input type="text" v-model="ja.name"><br><br>         单价：<input type="text" v-model="ja.price"><br><br>         数量：<input type="text" v-model="ja.num"><br><br>         <!-- 添加事件： -->         <button @click="add">添加</button>   </div> </template>
<script> export default {     data(){         return{             // 初始化全选的状态：             quan : false,             // 初始化要添加的数据：             ja:{id:0,name:"",price:0,num:0},             // 添加数据：             shu:[{tai:false,id:1,name:"苹果",price:8,num:10},             {tai:false,id:2,name:"香蕉",price:5,num:10},             {tai:false,id:3,name:"句子",price:6,num:10},             {tai:false,id:4,name:"梨",price:5.5,num:10},             {tai:false,id:5,name:"葡萄",price:12,num:10},             ]         }     },     methods:{         add(){             // 添加数据：             this.shu.push(this.ja)         },         del(i){             // 删除数据：             this.shu.splice(i,1)         },         all(){             // 进行for循环：             for(var i=0;i<this.shu.length;i++){                 this.shu[i].tai = this.quan             }         },         call(){             // 先设定一个长度             var count = 0;             // 用循环出数组里的每一个数据的状态：如果都等于true就全选count就++             for(var i=0;i<this.shu.length;i++){                 // 判断是否等于true                 if(this.shu[i].tai == true){                     count++                 }             }             if(count == this.shu.length){                 this.quan = true             }else{                 this.quan = false             }         }     },     computed:{         qq:function(){             // 定义一个总价格的初始值：             var money = 0;             for(var i=0;i<this.shu.length;i++){                 // 判断是否都勾上了：                 if(this.shu[i].tai == true){                     money+=this.shu[i].price*this.shu[i].num                 }             }             return money         }     } } </script>
<style>
</style>

 

标签：vue,false,name,price,js,全选,num,id
来源： https://www.cnblogs.com/187389tian/p/16210737.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。