<!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>
