vue实现根据不同状态取不同字段
时间: 2023-09-07 11:11:11 浏览: 150
可以使用computed属性实现,根据状态返回不同的字段。例如:
```
<template>
<div>
<p>{{ field }}</p>
<p>{{ status }}</p>
</div>
</template>
<script>
export default {
data() {
return {
status: 'active',
data: {
active: 'Active Field',
inactive: 'Inactive Field'
}
}
},
computed: {
field() {
return this.data[this.status]
}
}
}
</script>
```
当状态为active时,会显示Active Field,状态为inactive时会显示Inactive Field。
相关问题
vue根据不同字段显示不同输入框
可以使用 `v-if` 或 `v-show` 指令来根据不同字段显示不同的输入框。
假设我们有一个表单,其中有两个字段 `field1` 和 `field2`,需要根据不同的字段显示不同的输入框。我们可以使用 `v-if` 指令来实现。
代码示例:
```html
<template>
<div>
<div v-if="field1">
<label for="field1">Field 1:</label>
<input type="text" id="field1" v-model="field1Value">
</div>
<div v-else-if="field2">
<label for="field2">Field 2:</label>
<input type="text" id="field2" v-model="field2Value">
</div>
</div>
</template>
```
在上面的代码中,我们使用了 `v-if` 和 `v-else-if` 指令,当 `field1` 字段为真时,会显示 `field1` 的输入框,否则会判断 `field2` 字段是否为真,如果为真则显示 `field2` 的输入框。我们还使用了 `v-model` 指令来实现输入框与数据的双向绑定。
如果想要同时显示两个输入框,可以使用 `v-show` 指令。
代码示例:
```html
<template>
<div>
<label for="field1">Field 1:</label>
<input type="text" id="field1" v-model="field1Value" v-show="field1">
<label for="field2">Field 2:</label>
<input type="text" id="field2" v-model="field2Value" v-show="field2">
</div>
</template>
```
在上面的代码中,我们使用了 `v-show` 指令,当 `field1` 字段为真时,会显示 `field1` 的输入框,否则不显示,同理 `field2` 字段也是如此。
希望这可以帮助到你!
vue根据值显示不同字段
可以使用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。