vue radio单选框,获取当前项(每一项)的value值操作

 更新时间:2020年09月10日 09:07:51   作者:好巧.  
这篇文章主要介绍了vue radio单选框,获取当前项(每一项)的value值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

前言

本文使用了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)和复选框(CheckBox)

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值操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 手写Vue源码之数据劫持示例详解

    手写Vue源码之数据劫持示例详解

    这篇文章主要给大家介绍了手写Vue源码之数据劫持的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue3中的toRef和toRefs的区别和用法示例小结

    Vue3中的toRef和toRefs的区别和用法示例小结

    toRef和toRefs可以用来复制reactive里面的属性然后转成 ref,它保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,本文介绍Vue3中toRef和toRefs的区别和用法,需要的朋友可以参考下
    2024-08-08
  • 基于Vue和Firebase实现一个实时聊天应用

    基于Vue和Firebase实现一个实时聊天应用

    在本文中,我们将学习如何使用Vue.js和Firebase来构建一个实时聊天应用,Vue.js是一种流行的JavaScript前端框架,而Firebase是Google提供的实时数据库和后端服务,结合这两者,我们可以快速搭建一个功能强大的实时聊天应用,需要的朋友可以参考下
    2023-08-08
  • vue路由篇之router-view内容无法渲染出来问题

    vue路由篇之router-view内容无法渲染出来问题

    这篇文章主要介绍了vue路由篇之router-view内容无法渲染出来问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue实现两个列表之间的数据联动的代码示例

    Vue实现两个列表之间的数据联动的代码示例

    在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下
    2024-10-10
  • vue.js数据加载完成前显示原代码{{代码}}问题及解决

    vue.js数据加载完成前显示原代码{{代码}}问题及解决

    这篇文章主要介绍了vue.js数据加载完成前显示原代码{{代码}}问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 基于vue+element实现全局loading过程详解

    基于vue+element实现全局loading过程详解

    这篇文章主要介绍了基于vue+element实现全局loading过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 详解基于vue的服务端渲染框架NUXT

    详解基于vue的服务端渲染框架NUXT

    这篇文章主要介绍了Nuxt之vue服务端渲染,NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue实现搜索功能

    vue实现搜索功能

    这篇文章主要为大家详细介绍了vue实现搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue2中组件互相调用实例methods中的方法实现详解

    vue2中组件互相调用实例methods中的方法实现详解

    vue在同一个组件内,方法之间经常需要互相调用,下面这篇文章主要给大家介绍了关于vue2中组件互相调用实例methods中的方法实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论