el-radio 验证代码
时间: 2023-11-08 11:48:01 浏览: 89
用 Javascript 验证表单(form)中的单选(radio)值
当使用 el-radio 组件时,可以通过设置 :disabled 属性来禁用选项,并使用 v-model 值来获取用户选择的选项。以下是一个基本的 el-radio 验证代码示例:
```html
<template>
<div>
<el-radio-group v-model="selectedOption" :disabled="isDisabled">
<el-radio :label="option1">Option 1</el-radio>
<el-radio :label="option2">Option 2</el-radio>
<el-radio :label="option3">Option 3</el-radio>
</el-radio-group>
<div v-if="selectedOption === option1">You selected Option 1</div>
<div v-if="selectedOption === option2">You selected Option 2</div>
<div v-if="selectedOption === option3">You selected Option 3</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
isDisabled: false,
option1: 'option1',
option2: 'option2',
option3: 'option3'
};
}
};
</script>
```
在上面的代码中,我们使用了 el-radio-group 组件来包含多个 el-radio 组件,并通过 v-model 绑定 selectedOption 属性。选中的选项的值将被存储在 selectedOption 中。
通过设置 :disabled 属性为 true,你可以禁用所有的 el-radio 选项。
根据选择的选项,我们可以在模板中使用 v-if 来显示相应的内容。
请根据你的实际需求修改选项和显示的内容。这只是一个基本示例,你可以根据自己的具体需求进行更复杂的验证逻辑。
阅读全文