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 相关文章推荐
JS的replace方法介绍
Oct 20 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
RequireJS用法简单示例
Aug 20 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
JavaScript实现星级评价效果
May 17 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 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 文件类型判断代码
2009/03/13 PHP
php工具型代码之印章抠图
2018/07/18 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Django logging配置及使用详解
2019/07/23 Python
python实现人机五子棋
2020/03/25 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
教师自我鉴定
2013/12/13 职场文书
回门宴答谢词
2014/01/13 职场文书
国际贸易求职信
2014/07/05 职场文书
信息技术国培研修日志
2015/11/13 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js