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 脚本将当地时间转换成其它时区
Mar 19 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
package.json文件配置详解
Jun 15 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Vue实现根据hash高亮选项卡
May 27 Javascript
手把手教你如何编译打包video.js
Dec 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实现网站验证码功能【推荐】
2017/02/09 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
python strip()函数 介绍
2013/05/24 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
python实现简单登陆系统
2018/10/18 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
捐款倡议书范文
2014/02/02 职场文书
校友会致辞
2015/07/30 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
python 逐步回归算法
2021/04/06 Python
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python