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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
javascript实现简单留言板案例
Feb 09 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 max_execution_time执行时间问题
2011/07/17 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
Python求离散序列导数的示例
2019/07/10 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
《欢乐的泼水节》教学反思
2014/04/22 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年应急工作总结
2014/12/11 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
亮剑观后感600字
2015/06/05 职场文书
行政复议答复书
2015/07/01 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Golang 链表的学习和使用
2022/04/19 Golang