首页 > 其他 > 详细

elementUI单选框获取值

时间:2019-10-05 00:07:24      阅读:618      评论:0      收藏:0      [点我收藏+]

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单选框获取值

原文:https://www.cnblogs.com/luguankun/p/11623700.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!