<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> 喜欢的城市 <hr> <div v-for="item in arr"> {{item.city}} <input type="checkbox" value="" v-model="item.checked"> </div> <br /> <button @click="checkall">全选</button> <button @click="inverse">反选</button> <button @click="uncheckall">全不选</button> </div> <script> /* *** v-model中只能传数据变量 不能写成v-model = "true"、v-model = "{b:true}" 报错 只能用数据 v-model = "数据" ***在v-for中如果要循环数组，还要使用v-model, 那么model中的值，应该传成arr[key],在改变数据的时候 使用赋值的方式更改数据。 如果是对象，不能使用赋值的方式更改数据。 */ new Vue({ el:'#app', data:()=>{ return { arr:[ {city:'巴黎',checked:false}, {city:'悉尼',checked:true}, {city:'纽约',checked:false}, {city:'伦敦',checked:false}, {city:'柏林',checked:false} ] } }, methods:{ checkall(){ this.arr.forEach(item=>{ item.checked = true; }) }, inverse(){ this.arr.forEach(item=>{ item.checked = !item.checked; }) }, uncheckall(){ this.arr.forEach(item=>{ item.checked = false; }) } } }); </script> </body> </html>
