<!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>
博客列表 >Vue自学：v-model结合checkbox类型使用
Vue自学：v-model结合checkbox类型使用
- 梁凯达的博客原创转载
- 2021年01月15日 16:18:311305浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
