elementUI中radio的相关使用

elementUI中radio的相关使用

radio的使用
change：绑定值变化时触发的事件

<template>
  <div style="padding:20px;">
    <el-card>
      <el-radio v-model="radio" label="1">选择1</el-radio>
      <el-radio v-model="radio" label="2">选择2</el-radio>
    </el-card>
    <el-card style="margin-top:20px;">
      <el-radio-group v-model="radioChoose" @change="selectFruit">
        <el-radio :label="1">APPLE</el-radio>
        <el-radio :label="2">BANANA</el-radio>
        <el-radio :label="3">WATERMELLON</el-radio>
      </el-radio-group>
    </el-card>
    <el-card style="margin-top:20px;">
      <el-radio-group v-model="chooseOption" @change="selectOption">
        <el-radio-button
          v-for="item in radioOption"
          :key="item.value"
          :label="item.value"
          ></el-radio-button
        >
      </el-radio-group>
    </el-card>
    <el-card style="margin-top:20px;">
      <el-radio-group v-model="chooseOption" @change="selectOption">
        <el-radio
          v-for="item in radioOption"
          :key="item.value"
          :label="item.value"
          border
          ></el-radio
        >
      </el-radio-group>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      radio: "1",
      radioChoose: 1,
      chooseOption: "苹果",
      radioOption: [
        {
          value: "苹果",
        },
        {
          value: "香蕉",
        },
        {
          value: "西瓜",
        },
      ],
    };
  },
  methods: {
    selectFruit() {
      console.log("radioChoose", this.radioChoose);
    },
    selectOption() {
      console.log("chooseOption", this.chooseOption);
    },
  },
};
</script>

<style lang="scss" scoped></style>

效果展示
参考elementUI