elementUI单选框获取值
elementUI 单选框获取值有三种⽅法:
⽅法⼀：htmlradio添加切换事件
如果，单选框选项不是循环得来的，并且不使⽤el-radio标签的
（1）给每个el-radio标签添加v-model属性，v-model的属性值是label绑定的值，label绑定的值，可以是数字，也可以是选项的内容。（2）给每个e--radio标签添加@change事件，@change事件，打印v-model绑定的值，这个值就是选中项的内容
例⼦：
<template>
<div>
<div>
<el-radio v-model="radio" label="1" @change="getValue()">选项⼀</el-radio>
<el-radio v-model="radio" label="2" @change="getValue()">选项⼆</el-radio>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
radio:"1" // v-model 绑定的值，这个值是label⾥的内容，表⽰默认选中的值
};
},
methods: {
getValue(){
console.log(this.radio); // 打印的值，就是被选中的radio的值，1,2
}
},
}
</script>
<style lang="css" scoped>
</style>
⽅法⼆：
如果，el-raido的值不是从v-for获取来的，并且使⽤了el-radio-group标签的
(1)在el-radio-group标签⾥，v-model绑定默认选中的，并且定义change事件
(2)el-radio标签⾥的label绑定数字，代表绑定的内容
例⼦：
<template>
<div>
<!-- 使⽤el-radio-group标签包裹着el-radio标签，绑定change事件,v-model绑定默认选中项 -->
<el-radio-group v-model="radio" @change="getValue()">
<el-radio label="1">选项⼀</el-radio>
<el-radio label="2">选项⼆</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
radio:"1" // 默认选项
};
},
methods: {
getValue(){
console.log(this.radio); // 打印被选中的label的值
}
},
}
</script>
<style lang="css" scoped>
</style>
⽅法三：
如果，el-radio的内容是通过for循环得来的
（1）使⽤el-radio-group标签，v-model绑定默认选项，@change事件（2）el-radio绑定key，否则会出现警告
例⼦：
<template>
<div>
<el-radio-group v-model="radio" @change="getValue()">
<!-- 如果选项是通过v-for获得的，那么就要绑定key，不然会有警告 -->
<el-radio v-for="(item,i) in items" :key="i" :label="i">{{item}}</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data () {
return {
radio:0,  // 默认选中项，这⾥不能是字符串0，字符串1，要是数字0，数字1
items:["选项⼀","选项⼆"]  // 选项内容
};
},
methods: {
getValue(){
console.log(this.radio);
}
},
}
</script>
<style lang="css" scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。