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