<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
