在e-form表单里,有a表项、b表项和隐藏的c表项,当a表项的值变为2时,b表项隐藏,c表项显示,用v-if和v-else实现
时间: 2024-03-16 08:44:32 浏览: 130
vue.js使用v-if实现显示与隐藏功能示例
可以使用如下的代码实现:
```
<template>
<div>
<label for="a">A:</label>
<select id="a" v-model="aValue">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<label for="b" v-if="aValue !== '2'">B:</label>
<input id="b" v-if="aValue !== '2'" v-model="bValue">
<br>
<label for="c" v-else>C:</label>
<input id="c" v-else v-model="cValue">
</div>
</template>
<script>
export default {
data() {
return {
aValue: '1',
bValue: '',
cValue: ''
}
}
}
</script>
```
在这个代码中,我们使用了`v-if`和`v-else`指令来根据`aValue`的值显示不同的表项。当`aValue`不等于2时,显示`B`表项,反之则显示`C`表项。同时,我们使用了`v-model`指令来绑定表单元素的值,使得在用户输入时能够及时更新数据。
阅读全文