vue--基础应用全选

Posted 2022-12-19 moon-yyl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue--基础应用全选相关的知识，希望对你有一定的参考价值。

1.用computed实现全选

 1 <body>
 2     <div id="app">
 3         <input type="checkbox" v-model="checkAll">全选
 4         <input type="checkbox" v-for="(item,index) in checks" :key="index" v-model="item.flag">
 5     </div>
 6     <script src="./node_modules/vue/dist/vue.js"></script>
 7     <script>
 8         let vm = new Vue(
 9             data:
10                 checks:[flag:true,flag:false,flag:true]    
11             ,
12             computed:
13                 checkAll:
14                     get()
15                         return this.checks.every(function(item)
16                             return item.flag;
17                         );
18                     ,
19                     set(value)
20                         this.checks.forEach(element => 
21                             element.flag = value;
22                         );
23                     
24                 
25             
26         ).$mount("#app");
27     </script>
28 
29 </body>

以上是关于vue--基础应用全选的主要内容，如果未能解决你的问题，请参考以下文章

4.vue class 绑定- model基础应用

vue--基础应用 全选

vue--基础应用全选