点击checkbox / radio改变data里面的数据;

三个checkbox选择框:
 <!-- 多选框 --> 多选框
        <input type="checkbox" name="a" id="a" value='a' @change="check" >a
        <input type="checkbox" name="b" id="b" value='b' @change="check" >b
        <input type="checkbox" name="c" id="c" value='c' @change="check" >c
        <!-- 单选框 -->单选框 
        <input type="radio" name='1' id="1" value="1" checked="true" @change="radio">  1
        <input type="radio" name='1' id="2" value="2" @change="radio">  2
        <input type="radio" name='1' id="3" value="3" @change="radio">  3
        <div>
            <span v-for="(i,index) in params" :key="index">{{i}}</span>
        </div>
        单选框的值:{{radio_value}}

data中的参数:(当点击某一个checkbox时改变对应的对象属性值)
 params:[
      {'a':false},
      {'b':false},
      {'c':false}
    ],
radio_value:'1',

// 点击radio的时候触发radio方法(该方法在methods中)
radio(e){     
      this.radio_value = e.srcElement.value
 },
// 点击checkbox的时候触发check方法(该方法在methods中)
 check(e){ 
      var flag = e.srcElement.id
      var arr =  this.params.map(item=>{
      if(Object.keys(item)[0]==flag){
            item[flag] =  e.srcElement.checked
         }
          return item;
      })
          this.params = arr 
 }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值