vue绑定单选框(radio)和复选框(CheckBox)

本文介绍了如何在Vue.js应用中使用HTML和JavaScript进行数据绑定,以实现单选框(Radio)和复选框(Checkbox)的功能。通过HTML部分的定义和Vue实例的数据绑定,可以实现对用户选择状态的响应式更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

html部分
  <div style="width:500px;margin:50px auto;display:flex;flex-direction:column;">
        <div style="font-weight:600;font-size:18px">问卷调查</div>
        
        <div v-for="(item,index) in question" :key="index" style="padding-top:10px">
          <div style="margin-bottom:10px">{{item.title}}</div>
          <div v-if="item.sex" style="display:flex;align-items:center;">
          
            <div v-for="(item2,index2) in item.sex" :key="index2" @click="chooseSex(item2)" style="margin-right:20px">
              <input type="radio" :value="item2" v-model="radio2">  <span>  {{item2}}</span>
            </div>
          </div>

          <div v-if="item.item" style="display:flex;align-items:center;">
            <div v-for="(item3,index3) in item.item" :key="index3"  @click="chooseHobbied(item3)"  style="margin-right:20px">
              <input type="checkbox" :value="item3" v-model="checkbox"><span>  {{item3}}</span>
            </div>
          </div>
        </div>
      </div>
vue数据绑定
data() {
  return {
    radio2:'',
    checkbox:[],
    question:[
      {
        title:"1、请选择你的性别",
        sex:[
          '男','女'
        ]
      },
      {
        title:"2、请选择你的爱好",
        item:[
          '打球','读书','画画','游泳','跑步'
        ]
      }
    ], 
  };
},
js部分
//单选框radio选中值的改变
chooseSex(item){
        this.radio2 = item;
        console.log("点击",item,"值",this.radio2);
      },
      
       //复选框checkbox多项选择后的值,及取消选中后的其他值
      chooseHobbied(item){
        if(box.indexOf(item) === -1){
          box.push(item);
          this.checkbox = box;
          console.log("点击",item,"值",box);
        }else{
            box.splice(box.indexOf(item),1);
          console.log("box值",box);
          this.checkbox = box;
        }
      },

Vue中,可以使用v-for指令绑定多组复选框单选框。下面分别介绍如何绑定多组复选框单选框。 1. 绑定多组复选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], checkedItems: [] } } } </script> ``` 上述代码中使用v-for指令遍历items数组,生成多组复选框。使用v-model指令将复选框的选中状态与checkedItems数组绑定,checkedItems数组会根据选中的复选框动态更新。 2. 绑定多组单选框 ```html <template> <div> <div v-for="item in items" :key="item.id"> <input type="radio" :id="item.id" :value="item.value" v-model="selectedItem"> <label :for="item.id">{{ item.label }}</label> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, value: 'apple', label: '苹果' }, { id: 2, value: 'banana', label: '香蕉' }, { id: 3, value: 'orange', label: '橙子' } ], selectedItem: '' } } } </script> ``` 上述代码中使用v-for指令遍历items数组,生成多组单选框。使用v-model指令将单选框的选中状态与selectedItem变量绑定,selectedItem变量会根据选中的单选框动态更新。请注意,单选框的name属性应该相同,这样才能实现单选的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值