【vue2】class绑定和style绑定综合用法_vue2 绑定class isacitve-CSDN博客

本文链接：https://blog.csdn.net/qq_44971635/article/details/129012113

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    .active {
        color: red;
    }
    
    .TowActive {
        color: blue;
    }
</style>

<body>
    <div id="app-5">
        <!-- 1、绑定Class方法 -->
        <!-- 对象语法 -->
        <div :class="{active:isActive,'text-danger': hasError }">星期一</div>
        <div :class="classObj"></div>
        <!-- 数组语法 -->
        <div :class="[activeClass, errorClass]">星期二</div>
        <div :class="[isActive ? activeClass : '', errorClass]">星期三</div>
        <div :class="[{ active: isActive }, errorClass]">星期四</div>

        <!-- 2、绑定内联样式 -->
        <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">星期五</div>
        <!-- 对象写法 -->
        <div :style="styleObject">星期六</div>
        <!-- 数组写法 -->
        <div :style="[baseStyles, overridingStyles]">星期天</div>
    </div>
    </div>

</body>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!',
            isActive: true,
            hasError: true,
            error: null,
            // classObj: {
            //     active: true,
            //     'text-danger': false,
            // }
            activeClass: 'TowActive',
            errorClass: 'text-danger',
            activeColor: 'green',
            fontSize: 30,
            styleObject: {
                color: 'yellow',
                fontSize: '13px'
            },
            baseStyles: {
                fontSize: "25px"
            },
            overridingStyles: {
                color: "pink"
            }
        },
        computed: {
            // 事件方法
            classObj: function() {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    })
</script>

</html>