<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
