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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 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
基于PHP静态类的原罪详解
2013/05/06 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
独特的python循环语句
2016/11/20 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
Django的性能优化实现解析
2019/07/30 Python
python区分不同数据类型的方法
2019/10/14 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
八年级历史教学反思
2014/01/10 职场文书
三方合作协议书范本
2014/04/18 职场文书
学生保证书范文
2014/04/28 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
大学迎新生标语
2014/10/06 职场文书
淮海战役观后感
2015/06/11 职场文书
护理自荐信
2019/05/14 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Redis RDB技术底层原理详解
2021/09/04 Redis
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Python获取字典中某个key的value
2022/04/13 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技