首页 > web前端 > js教程 > vue实现全选反选功能案例详解

vue实现全选反选功能案例详解

php中世界最好的语言
发布: 2018-05-11 13:46:35
原创
1989 人浏览过

这次给大家带来vue实现全选反选功能案例详解,vue实现全选反选功能的注意事项有哪些,下面就是实战案例,一起来看一下。

全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据,用数据驱动dom,也是vue框架的一个核心思想,思想转变过来,对功能的实现自然容易理解一些。

例如下面这个简单的demo

按照jQuery的思想来做的话,要选中全选checkbox和所有的checkbox项,分别注册选中事件,判断选中状态来给相关的checkbox设置对应的状态,这就涉及到很多的dom操作

下面就看一下vue数据驱动dom的思想来实现这一功能。

vue数据驱动dom实现功能

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<p class="checkbox">

  <label for="quan">

    <!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->

    <input id="quan" type="checkbox" @click="checkAll($event)"> 全选

  </label>

  <label>

    <!-- v-model 双向数据绑定命令 -->

    <input class="checkItem" type="checkbox" value="apple" v-model="checkData"> apple

  </label>

  <label>

    <input class="checkItem" type="checkbox" value="banana" v-model="checkData"> banana

  </label>

  <label>

    <input class="checkItem" type="checkbox" value="orange" v-model="checkData"> orange

  </label>

</p>

<script>

  new Vue({

    el: '#app',

    data(){

      return {

        checkData: [] // 双向绑定checkbox数据数组

      }

    },

    watch: { // 监视双向绑定的数据数组

      checkData: {

        handler(){ // 数据数组有变化将触发此函数

          if(this.checkData.length == 3){

            document.querySelector('#quan').checked = true;

          }else {

            document.querySelector('#quan').checked = false;

          }

        },

        deep: true // 深度监视

      }

    },

    methods: {

      checkAll(e){ // 点击全选事件函数

        var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项

        if(e.target.checked){ // 判定全选checkbox的勾选状态

          for(var i=0;i<checkObj.length;i++){

            if(!checkObj[i].checked){ // 将未勾选的checkbox选项push到绑定数组中

              this.checkData.push(checkObj[i].value);

            }

          }

        }else { // 如果是去掉全选则清空checkbox选项绑定数组

          this.checkData = [];

        }

      }

    }

  });

</script>

登录后复制

利用vue的双向数据绑定v-model命令,当勾选时,checkbox的value值会自动push到所绑定的数组checkData中去,省去了不少对dom的操作。

如果是固定选项这样是可以实现的,但是这种方法有一些弊端,双向绑定数组数据是写死的,不太灵活,如果增加了checkbox选项,要更改wach里绑定数组的长度判断。

有时候checkbox选项也是后台动态获取过来的,这样也灵活一些。

例如后台数据是这样的:

1

2

3

4

5

6

7

8

9

10

  ajaxData: [{

    name: 'a',

    value: 'apple'

  },{

    name: 'b',

    value: 'banana'

  },{

    name: 'c',

    value: 'orange'

  }]

登录后复制

需要先动态渲染checkbox选项,在进行数据绑定。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

<p id="app">

  <p class="checkbox">

    <label for="quan">

      <!-- 这里的 $event 是将当前对象传入进去,具体详情请参照vue官方文档 -->

      <input id="quan" type="checkbox" @click="checkAll($event)"> 全选

    </label>

    <label v-for="item in ajaxData">

      <!-- v-model 双向数据绑定命令 -->

      <input class="checkItem" type="checkbox" :value="item.value" v-model="checkData"> {{item.name}}

    </label>

  </p>

</p>

<script>

  new Vue({

    el: '#app',

    data(){

      return {

        ajaxData: [{ // 后台请求过来的数据

          name: '选项1',

          value: 'apple'

        },{

          name: '选项2',

          value: 'banana'

        },{

          name: '选项3',

          value: 'orange'

        }],

        checkData: [] // 双向数据绑定的数组

      }

    },

    watch: {

      checkData: { // 监视双向绑定的数组变化

        handler(){

          if(this.checkData.length == this.ajaxData.length){

            document.querySelector('#quan').checked = true;

          }else {

            document.querySelector('#quan').checked = false;

          }

        },

        deep: true

      }

    },

    methods: {

      checkAll(e){ // 点击全选事件

        if(e.target.checked){

          this.ajaxData.forEach((el,i)=>{

            // 数组里没有这一个value才push,防止重复push

            if(this.checkData.indexOf(el.value) == '-1'){ 

              this.checkData.push(el.value);

            }

          });

        }else // 全不选选则清空绑定的数组

          this.checkData = [];

        }

      }

    }

  });

</script>

登录后复制

方法并不是最优的写法,也存在一些弊端,欢迎各位指点迷津,一起探讨。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue实现搜索列表内容

axios发送post请求提交图片表单步骤详解

以上是vue实现全选反选功能案例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板