Vue条件添加CSS类的正确方法是使用v-bind指令和对象语法。通过在元素上绑定一个对象,可以根据条件动态地添加或移除CSS类。
具体步骤如下:
示例代码如下:
<template>
<div>
<p :class="{ 'highlight': isHighlighted }">This is a paragraph.</p>
</div>
</template>
<script>
export default {
data() {
return {
isHighlighted: true
};
}
};
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
在上述示例中,当isHighlighted为true时,CSS类highlight将被添加到p元素上,使其背景色变为黄色。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云