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 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
239军机修复记
2021/03/02 无线电
php+mysql写的简单留言本实例代码
2008/07/25 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python字符串常用方法
2018/06/14 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python telnet登陆功能实现代码
2020/04/16 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python类及获取对象属性方法解析
2020/06/15 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
白色公司:The White Company
2017/10/11 全球购物
大学生开西餐厅创业计划书
2014/02/01 职场文书
经典婚礼主持词
2014/03/13 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
医学求职信
2014/05/28 职场文书
电工实训报告总结
2014/11/05 职场文书
社区结对共建协议书
2016/03/23 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python