vue根据值显示不同字段
时间: 2023-08-13 08:04:30 浏览: 89
可以使用v-if或v-show指令实现根据值显示不同字段,具体实现方法如下:
使用v-if指令:
```html
<template>
<div>
<div v-if="value === 'A'">
显示字段A
</div>
<div v-else-if="value === 'B'">
显示字段B
</div>
<div v-else>
显示其他字段
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 'A'
}
}
}
</script>
```
使用v-show指令:
```html
<template>
<div>
<div v-show="value === 'A'">
显示字段A
</div>
<div v-show="value === 'B'">
显示字段B
</div>
<div v-show="value !== 'A' && value !== 'B'">
显示其他字段
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: 'A'
}
}
}
</script>
```
以上代码中,根据value的不同值,显示不同的字段。其中,使用v-if指令可以在条件不满足时,直接删除对应的DOM元素,而使用v-show指令只是将对应的DOM元素的display样式设置为none。