Vue动态绑定class属性的5种方法：

最新推荐文章于 2024-07-24 10:50:10 发布

Ambition-do it

最新推荐文章于 2024-07-24 10:50:10 发布

阅读量2.2k

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_46753476/article/details/125853988

版权

1 第一种方法

   <div :class="{'active':isActive}"> 文字</div>

2 第二种方法

<div class="activeOne" 

:class= "{activeTwo:isActive,'activeThree': hasError}" > 文字</div>

3 第三种方法

 <div :class="classObject"> 文字</div>

4 第四种方法

以数组的形式表示

<div :class="[activeClass, errorClass]"> 文字</div>
   <style>
        .activeClass {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .errorClass {
            background-color: orange;
        }
    </style>

5 第五种方法


  <div :class="[isActive?'activeTwo':'activeThree']"> 文字</div>

<script>
    data(){
        return{
            isActive:true
    }
}

</script>

<style>
    .activeTwo{
        color:red
    }

    .activeThree{
        color:pink
    }
</style>