<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id='app'> <p>输入框</p> <input type='text' placeholder='-----' v-model='text'> <p>输入内容:{{ text }}</p> <hr> <p>单复选框</p> <input type='checkbox' id='AAAA' value='Aaaa' v-model='checked'/> <label for='AAAA'>{{ checked }}</label> <hr> <p>多个复选框</p> <input type='checkbox' id='BB' value='Bb' v-model='checkedNames'/> <label for='BB'>Bb</label> <input type='checkbox' id='CC' value='Cc' v-model='checkedNames'/> <label for='CC'>Cc</label> <p>选择结果:{{ checkedNames }}</p> <hr> <p>单选框</p> <input type='radio' id='DD' value='dd' v-model='picked'/> <label for='DD'>dd</label> <input type='radio' id='EE' value='ee' v-model='picked'/> <label for='EE'>ee</label> <hr> <p>下拉框</p> <select v-model='selected'> <option value=''>请选择。。。</option> <option value='aa'>AA</option> <option value='bb'>BB</option> </select> <hr> <p>单复选框</p> <input type='checkbox' id='HH' value='Hh' v-model='checkedOnly' @click="changeAllChecked()"/> <label for='HH'>{{ checkedOnly }}</label> <p>多个复选框</p> <input type='checkbox' id='FF' value='Ff' v-model='checkeds'/> <label for='FF'>Ff</label> <input type='checkbox' id='GG' value='Gg' v-model='checkeds'/> <label for='GG'>Gg</label> <p>选择结果:{{ checkeds }}</p> </div> <script> new Vue({ el:'#app', data:{ text: '', checked: false, checkedNames: [], picked:'dd', selected: '', checkedOnly: false, checkeds:[], checkedAll:["Ff", "Gg"] }, methods:{ changeAllChecked: function(){ if(this.checkedOnly){ this.checkeds = this.checkedAll }else{ this.checkeds =[] } } }, watch:{ "checkeds": function(){ if(this.checkeds.length == this.checkedAll.length){ this.checkedOnly = true } else { this.checkedOnly = false } } } }) </script> </body> </html>