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>