v-model结合CheckBox类型使用

最新推荐文章于 2024-04-09 14:48:57 发布

Eli-sun

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量319

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/vfjcgg/article/details/106761022

版权

Vuejs 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

复选框分为两种情况：单个勾选框和多个勾选框

使用label的好处不仅点选框可以选中而且点文字也可以选中,一般情况下一个label对应一个input

 <label for="license">
   <input type="checkbox" id="license" v-model="agree">同意协议
 </label>

CheckBox单选框

  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>你选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>

CheckBox多选框

  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>你的爱好是：{{hobbies}}</h2>

栗子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<div id="app">
  <!--1. CheckBox单选框-->
  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>你选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>


  <!--2. CheckBox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="排球" v-model="hobbies">排球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>你的爱好是：{{hobbies}}</h2>
  {{message}}</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
      isAgree:false,//单选框
      hobbies:[]//多选框
    }
  })
</script>
</body>
</html>

Eli-sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model结合CheckBox类型使用

复选框分为两种情况：单个勾选框和多个勾选框使用label的好处不仅点选框可以选中而且点文字也可以选中,一般情况下一个label对应一个input <label for="license"> <input type="checkbox" id="license" v-model="agree">同意协议 </label>CheckBox单选框 <label for="license"> <input type="checkbox
复制链接

扫一扫