vue2中style三元表达式
时间: 2023-10-20 17:27:37 浏览: 171
vue_three_3d
在Vue 2中,你可以使用三元表达式在`<style>`标签中动态绑定样式。以下是一个示例:
```vue
<template>
<div :class="{'red': isRed}">
<p :style="isBold ? 'font-weight: bold' : ''">Hello, world!</p>
</div>
</template>
<script>
export default {
data() {
return {
isRed: true,
isBold: false
};
}
};
</script>
<style>
.red {
background-color: red;
}
</style>
```
在上面的示例中,我们使用`:class`来动态绑定类名,根据`isRed`的值决定是否添加`red`类。使用`:style`动态绑定样式,根据`isBold`的值决定是否设置`font-weight: bold`样式。
请注意,在`:style`绑定中,可以直接写内联样式字符串,也可以使用一个返回样式对象的计算属性。
希望这个示例能帮助到你!如果有任何问题,请随时提问。
阅读全文