vue.js的全选功能
作者：互联网
全选功能：
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