VUE 元素的属性值使用三元表达式
时间: 2023-07-15 20:10:14 浏览: 158
对VUE中的对象添加属性
是的,Vue 元素的属性值可以使用三元表达式来实现条件渲染。例如:
```html
<template>
<div>
<p :class="isActive ? 'active' : 'inactive'">这是一个段落</p>
<button :disabled="isDisabled ? true : false">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
isDisabled: false,
};
},
};
</script>
```
在上面的示例中,`:class` 和 `:disabled` 属性的值都使用了三元表达式来根据条件动态地渲染不同的值。当 `isActive` 为 `true` 时,`<p>` 元素的 `class` 属性值为 `active`,否则为 `inactive`。当 `isDisabled` 为 `true` 时,`<button>` 元素的 `disabled` 属性值为 `true`,否则为 `false`。
阅读全文