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

前言

本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句 v-for 写在 input标签上就可以

1、使用v-for循环的radio单选框

01)需要注意的是，这是使用的是 change 事件，而不是 click 点击事件

type="radio"

v-model="radioVal"

:value="item.value"

@change="getRadioVal"

export default {

data() {

return {

radioData: [

{ value: '全部' },

{ value: '部分' },

{ value: '零散' }

radioVal: '全部' // 用于设置默认选中项

};

methods: {

getRadioVal() {

console.log(this.radioVal);

}

};

2、不使用v-for循环的radio单选框

01)需要注意的是，这是使用的是 change 事件，而不是 click 点击事件

全部

部分

零散

export default {

data() {

return {

radioVal: '全部' // 用于设置默认选中项

};

methods: {

getRadioVal() {

console.log(this.radioVal);

}

};

点击每一项获得当前项的value值，使用v-for 和不使用v-for 实现的效果是一样的

这里就不分开写效果图了

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

补充知识：vue绑定单选框(radio)和复选框(CheckBox)

html部分

问卷调查

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

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

vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTM ...
vue 使用element 单选框怎么同时获取value和label值
单选框要获取value和label,并且会在不同组件接口使用,就不能把数据写死,而是要做一个循环,获取到后就可以传给其他组件使用了:如下: 样式图: //HTML <b>用户体系类型:&l ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
react单选框获取值
react的input的每一种类型都要绑定onChange事件的,绑定onChange事件要传入事件对象的 react的单选框需要绑定checked属性的 import React, { Compon ...
动态给下拉框，单选框赋值，设置默认选中项的几种方法
selectId为select的id $('#selectId')[0].selectedIndex = 0; //根据索引来赋值 $('#selectId').val('val值'); //根据va ...
js title 单选框获取_js简单获取表单中单选按钮值的方法
本文实例讲述了js简单获取表单中单选按钮值的方法.分享给大家供大家参考,具体如下: HTML部分如下: bordercolor="#999999">回退类型: type=&q ...
vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】
vue3 ant design vue项目实战--单选框(Radio)的使用以及Form表单的双向绑定知识调用(form表单的源代码附在文章最后) 场景复现实现需求 form表单整体架构的搭建 i ...
微信小程序单选框radio使用实例
radio 用来实现单选框效果,本文章效果如下: 1 wxml 文件中 <view class="tui-content"><radio-group class= ...
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><style>/* ...

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

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

最新文章

热门文章