elementUI单选框获取值
Posted luguankun
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI单选框获取值相关的知识,希望对你有一定的参考价值。
elementUI 单选框获取值有三种方法:
方法一:
如果,单选框选项不是循环得来的,并且不使用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>
以上是关于elementUI单选框获取值的主要内容,如果未能解决你的问题,请参考以下文章