search

博客列表 >Vue自学：v-model结合checkbox类型使用

Vue自学：v-model结合checkbox类型使用

梁凯达的博客
梁凯达的博客原创
2021年01月15日 16:18:311307浏览
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  8.     <title>Vue自学：v-model结合checkbox类型使用</title>
  9. </head>
  10. <body>
  11.     <!-- 案例一：勾选已阅读才能进入下一步 -->
  12.     <div id="app">
  14.         <label for="agree">
  15.             <input type="checkbox" name="agree" id="agree" value="同意" v-model="isCheckbox" />同意
  16.         </label>
  17.         <label for="disagree">
  18.             <input type="checkbox" name="disagree" id="disagree" value="不同意"/>不同意
  19.         </label>
  20.         <button type="button" v-bind:disabled="!isCheckbox">提交注册</button>
  21.     </div>
  22.     <!-- 案例二：多选框点击存入数组中 -->
  23.     <div id="app1">
  24.         <label for="">
  25.             <input type="checkbox" value="电影" id="movie" v-model="isCheckArray">电影
  26.             <input type="checkbox" value="读书" id="read" v-model="isCheckArray">读书
  27.             <input type="checkbox" value="运动" id="movement" v-model="isCheckArray">运动
  28.             <input type="checkbox" value="上网" id="surf" v-model="isCheckArray">上网
  29.         <h3>存入数组中...{{isCheckArray}}</h3>
  30.         </label>
  31.     </div>
  32. </body>
  33. <script type="text/javascript">
  34.     const app = new Vue({
  35.         el:'#app',
  36.         data:{
  37.             isCheckbox:false,
  38.         },
  39.         methods:{
  41.         }
  42.     })
  43.     const app1 = new Vue({
  44.         el:'#app1',
  45.         data:{
  46.             isCheckArray:[]
  47.         },
  48.         methods:{
  50.         }
  51.     })
  52. </script>
  53. </html>
上一条：Vue自学：v-model结合select类型使用下一条：Vue自学：v-model结合radio类型使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多