用vue去做全选反选案例

在前面的博客中有一个用js原生代码做的全选反选案例,这次我们用vue看看怎么去实现.其实思路都差不多,就是vue是无法直接操作dom的.

1.准备

        css样式自己准备一个即可.

        用vue指令在终端创建一个项目.

2.功能需求:

        1.点击全选可以控制小选按钮

        2.点击反选按钮可使所有小选按钮变成相反的状态.

        3.当所有小选都被选中时全选也被选中,反之有一个小选没被选中时,全选都不会自动选中.

3.代码实现

        1.全选控制小选

                给全选添加一个v-model指令isAll,v-model指令也可以改变复选框的状态,当v-model的值为true时被选中,为false时不被选中.

                给所有小选也添加一个v-model指令.

                

有一点要强调的,我是通过v-for来创建小选的,所以每一个小选的v-model是独立的一个值,是val对象里的一个属性.如果让所有小选的v-model值同一个的话就会出现选中一个其余的兄弟也会被选中.

在script标签里,我们就通过计算属性去操作.

 

computed是vue的计算属性,他是和data是同级的属性,作用就是用来更改一些需要计算数据的值.

computed里面有俩个固定的方法,set和get,如果不设置set方法,当值发生改变时就会报错.

所以如果我们一旦有更改值的操作,就需要加入set方法.

我们通过遍历数组中所有的c属性,让他们的值和全选的值一样.用的是数组的forEach方法.

注意光是这个还不够,get里面必须要有一个返回值给isall,暂且先给一个false.

        2.反选操作

                反选是一个按钮,所以我们需要给按钮添加点击事件,用v-on,也可以直接使用@符号.

                

                代码如下:

因为需要改变所有的小选,所以还是需要用forEach方法.只需要让对象的c属性等于相反就行.

        3.小选控制全选

                代码如下: 

 

这里用到了一个every方法,这个方法就是遍历一遍数组,判断一个条件,有一个不符合条件的都返回false.