Vue中Class数据绑定

news2024/9/22 15:40:06

Class数据绑定

数据绑定的一个常见需求场景是操作CSS class列表，因为class是attribute（属性），我们可以和其他attribute一样使用v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，Vue 专门为class 的v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是数组或对象。

绑定对象Object

<template>
<h3>class数据绑定</h3>
<hr>
<div :class="{active:isActive,'text-danger':hasError}">isActive</div>
<button @click="exchage">切换</button>

</template>
<script>
 export default {
data(){
    return{
        isActive:true,
        hasError:true
    }
},
methods:{
    exchage(){
        this.isActive=!this.isActive
    }
}
}

</script>
<style scoped>
.active{
    color:red;
}
</style>

运行结果
未切换前：
在这里插入图片描述
切换后：

多个对象绑定

<template>
<h3>class数据绑定</h3>
<hr>
<div :class="classObject">isActive</div>
<button @click="exchage">切换</button>

</template>
<script>
 export default {
data(){
    return{
      classObject:{
        active:true,
       'text-danger':true
      }
    }
},
methods:{
    exchage(){

        this.classObject.active = !this.classObject.active
    }
}
}

</script>
<style scoped>
.active{
    color:rgb(132, 0, 255);
    font-size: large;
}
</style>

运行结果：
切换前：
在这里插入图片描述
切换后：

数组绑定

<template>
    <h3>class数据绑定</h3>
    <hr>
    <div :class="[activeClass,errorClass]">isActive</div>
    </template>
    <script>
     export default {
    data(){
        return{
           activeClass: 'active',
           errorClass:'text-danger'
        }
    },

    }

    </script>
    <style scoped>
    .active{
        color:red;
    }
    </style>

运行结果：
在这里插入图片描述
如果你想在数组中渲染某个class,你可以使用三元表达式。

<template>
    <h3>class数据绑定</h3>
    <hr>
    <div :class="[isActive ? 'active' : '']">isActive</div>
    <button @click="exchage">切换</button>

    </template>
    <script>
     export default {
    data(){
        return{
            isActive:true,
        }
    },
    methods:{
        exchage(){
            this.isActive=!this.isActive
        }
    }
    }

    </script>
    <style scoped>
    .active{
        color:red;
    }
    </style>

运行结果：
在这里插入图片描述
切换：

数组和对象

<template>
    <h3>class数据绑定</h3>
    <hr>
    <div :class="[{'active':isActive},errorClass]">isActive</div>
    <button @click="exchage">切换</button>

    </template>
    <script>
     export default {
    data(){
        return{
            isActive:true,
            errorClass:"text-danger"
        }
    },
    methods:{
        exchage(){
            this.isActive=!this.isActive
        }
    }
    }

    </script>
    <style scoped>
    .active{
        color:red;
    }
    </style>