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 相关文章推荐
javascript 获取网页参数系统
Jul 19 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
js 操作select相关方法函数
Dec 06 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
如何用JS实现简单的数据监听
May 06 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巧获服务器端信息
2006/12/06 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
浅谈Webpack打包优化技巧
2018/06/12 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
python中range()与xrange()用法分析
2016/09/21 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Django框架 querySet功能解析
2019/09/04 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python学习笔记之装饰器
2020/08/06 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Shell编程面试题
2012/05/30 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
项目投资意向书
2014/04/01 职场文书
校园广播稿100字
2014/10/06 职场文书
导游词之永泰公主墓
2019/12/04 职场文书