vue radio单选框,获取当前项(每一项)的value值操作


Posted in Javascript onSeptember 10, 2020

前言

本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以

1、使用v-for循环的radio单选框

01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件

<template>
 <div>
  <label v-for="(item, index) in radioData" :key="index">
   <input
    type="radio"
    v-model="radioVal"
    :value="item.value"
    @change="getRadioVal"
   />
   {{ item.value }}
  </label>
 </div>
</template>

<script>
export default {
 data() {
  return {
   radioData: [
    { value: '全部' },
    { value: '部分' },
    { value: '零散' }
   ],
   radioVal: '全部' // 用于设置默认选中项
  };
 },
 methods: {
  getRadioVal() {
   console.log(this.radioVal);
  }
 }
};
</script>

2、不使用v-for循环的radio单选框

01)需要注意的是,这是使用的是 change 事件,而不是 click 点击事件

<template>
 <div>
  <label><input v-model="radioVal" type="radio" value="全部" @change="getRadioVal">全部</label>
  <label><input v-model="radioVal" type="radio" value="部分" @change="getRadioVal">部分</label>
  <label><input v-model="radioVal" type="radio" value="零散" @change="getRadioVal">零散</label>
 </div>
</template>
<script>
export default {
 data() {
  return {
   radioVal: '全部' // 用于设置默认选中项
  };
 },
 methods: {
  getRadioVal() { 
   console.log(this.radioVal);
  }
 }
};
</script>

点击每一项获得当前项的value值,使用v-for 和不使用v-for 实现的效果是一样的

这里就不分开写效果图了

vue radio单选框,获取当前项(每一项)的value值操作

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

补充知识:vue绑定单选框(radio)和复选框(CheckBox)

vue radio单选框,获取当前项(每一项)的value值操作

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 radio单选框,获取当前项(每一项)的value值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
actionscript与javascript的区别
May 25 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
vue循环中点击选中再点击取消(单选)的实现
Sep 10 #Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
You might like
Snoopy类使用小例子
2008/04/15 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
React-Native左右联动List的示例代码
2017/09/21 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
linux面试题参考答案(8)
2016/04/19 面试题
计算机专业个人简短的自我评价
2013/10/23 职场文书
应届生妇产科护士求职信
2013/10/27 职场文书
市场部专员岗位职责
2013/11/30 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
廉洁自律承诺书
2014/03/27 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js