参与计算的值发生改变时触发

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    8. </head>
    9. <body>
    10.     <div id="app">
    11.         <div v-for="item of lists" :key="item.name">
    12.             <input type="checkbox" v-model="item.state">{{item.name}}
    13.         </div>
    14.         <div>
    15.             <input type="checkbox" v-model="sum">全选/反选
    16.         </div>
    17.     </div>
    18.     <script>
    19.         new Vue({
    20.             el:"#app",
    21.             data(){
    22.                 return {
    23.                     lists:[
    24.                         {name:"css",state:false},
    25.                         {name:"html",state:false},
    26.                         {name:"js",state:false}
    27.                     ]
    28.                 }
    29.             },
    30.             computed:{
    31.                 sum:{
    32.                     get(){
    33.                         return this.lists.every(item=>item.state)
    34.                     },
    35.                     set(val){
    36.                         this.lists.forEach(item=>{
    37.                             item.state = val
    38.                         })
    39.                     }
    40.                 },
    41.                 readItems(){
    42.                     return this.lists.filter(item=>item.state == true)
    43.                 }
    44.             }
    45.         })
    46.     </script>
    47. </body>
    48. </html>