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>