<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <title>Vue自学：v-model结合checkbox类型使用</title></head><body> <!-- 案例一：勾选已阅读才能进入下一步 --> <div id="app"> <label for="agree"> <input type="checkbox" name="agree" id="agree" value="同意" v-model="isCheckbox" />同意 </label> <label for="disagree"> <input type="checkbox" name="disagree" id="disagree" value="不同意"/>不同意 </label> <button type="button" v-bind:disabled="!isCheckbox">提交注册</button> </div> <!-- 案例二：多选框点击存入数组中 --> <div id="app1"> <label for=""> <input type="checkbox" value="电影" id="movie" v-model="isCheckArray">电影 <input type="checkbox" value="读书" id="read" v-model="isCheckArray">读书 <input type="checkbox" value="运动" id="movement" v-model="isCheckArray">运动 <input type="checkbox" value="上网" id="surf" v-model="isCheckArray">上网 <h3>存入数组中...{{isCheckArray}}</h3> </label> </div></body><script type="text/javascript"> const app = new Vue({ el:'#app', data:{ isCheckbox:false, }, methods:{ } }) const app1 = new Vue({ el:'#app1', data:{ isCheckArray:[] }, methods:{ } })</script></html>
