1.效果图

 

2.分析步骤 

        两种方法：

        （1）普通全选反选实现，通过methods方法实现

                1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

                2.接着写静态布局

                3.挂载dom

                4.添加指令

                5.肯定要储存数据

                6.methods方法实现

                7. 最后效果实现

        （二）全选反选通过computed计算属性来实现

                1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

                2.接着写静态布局

                3.挂载dom

                4.添加指令

                5.肯定要储存数据

                6.computed计算属性方法实现

                7. 最后效果实现

3.代码块部分

     （一）通过methods方法实现

        按步骤操作

               1.首先：引入<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

                        

 

               2.静态布局，挂载dom，储存数据，添加指令

        

           挂载dom     

数据 

 

         存储数据

        methods方法 

        3.效果实现

 

 （二）通过computed方法实现

        按步骤操作

               1.首先：引入<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

                        

               2.静态布局，挂载dom，储存数据，添加指令

        

 

           挂载dom     

数据 

 

        data 存储数据

        computed方法 通过计算属性来实现

 3.效果实现

4.总结

        其实实现全选反选还有很多方法，watch也可以实现不过有bug，还有别的方法，只是简单写两种，要实现效果首先怎样理解怎样来，要懂得分析，首先在脑子里有个构思，想想怎么写，其实很简单，前端原本就是要动脑子，自己心里怎样想的就怎么写。反正我自我感觉计算属性比较好用，看个人了！怎样顺怎样来，加油！！！