用el-radio做男女选择
时间: 2023-11-19 14:04:36 浏览: 38
首先,在 HTML 文件中添加 el-radio 组件,并设置不同的值:
```html
<el-radio v-model="gender" label="male">男</el-radio>
<el-radio v-model="gender" label="female">女</el-radio>
```
在 Vue.js 中,我们需要定义一个 data 属性来存储用户选择的值:
```javascript
data() {
return {
gender: '' // 初始值为空
}
}
```
这样,当用户选择男或女时,gender 的值就会被更新为相应的值。
最后,我们可以在模板中使用 gender 来展示用户的选择:
```html
<p>您选择的性别是:{{ gender }}</p>
```
完整代码示例:
```html
<template>
<div>
<el-radio v-model="gender" label="male">男</el-radio>
<el-radio v-model="gender" label="female">女</el-radio>
<p>您选择的性别是:{{ gender }}</p>
</div>
</template>
<script>
export default {
data() {
return {
gender: ''
}
}
}
</script>
```
相关问题
el-radio-group默认选择
el-radio-group的默认选择可以通过设置el-radio的v-model属性来实现。v-model属性绑定的值即为当前默认选中的值。
例如,如果你想要将第二个el-radio设为默认选择,你可以这样写:
```html
<template>
<el-radio-group v-model="selected">
<el-radio :label="1">选项 1</el-radio>
<el-radio :label="2">选项 2</el-radio>
<el-radio :label="3">选项 3</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selected: 2
}
}
}
</script>
```
在上面的例子中,selected的初始值为2,所以第二个el-radio会被默认选中。你也可以根据需要将selected设为其他值,以达到不同的默认选择效果。
el-radio-group 取消选择
要取消 el-radio-group 组件的选择,你可以使用 v-model 绑定的属性将其值设置为 null 或者空字符串。例如,如果你的 v-model 属性为 selectedValue,你可以在代码中将其设置为 null 或 ''。这样就会取消选择。具体示例代码如下:
```html
<template>
<el-radio-group v-model="selectedValue">
<el-radio :label="1">Option 1</el-radio>
<el-radio :label="2">Option 2</el-radio>
<el-radio :label="3">Option 3</el-radio>
</el-radio-group>
<el-button @click="clearSelection">Clear Selection</el-button>
</template>
<script>
export default {
data() {
return {
selectedValue: null
};
},
methods: {
clearSelection() {
this.selectedValue = null;
}
}
};
</script>
```
在上面的示例中,通过点击 "Clear Selection" 按钮来取消选择 el-radio-group 组件中的选项。当点击按钮时,clearSelection 方法会将 selectedValue 设置为 null,从而取消选择。