vue/classStyle.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class 与 Style 绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .title {
            color: red;
            font-size: 20px;
        }

        .blue {
            color: blue;
        }

        .small {
            font-size: 10px;
        }

        .selected {
            color: green;
        }

.bg {
    background-color: grey;
}
        .love-title {
            font-size: 30px;
            color: #000;
        }
        .love-color {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 通过 v-bind 动态切换 class -->
        <!-- :class 可动态绑定一个 class，如果 isBlue 为真时，使用  blue 选择器；isSmall 为真时，使用  small 选择器-->
        <div class="title" :class="{blue: isBlue, small: isSmall}">{{title}}</div>
        <!-- 这个和上面的等价，可以把选择器直接在 data 中 -->
        <div class="title" :class="titleClass">{{title}}</div>
        <!-- 直接使用计算属性 -->
        <div class="title" :class="subTitleClass">{{title}}</div>
        <!-- 三元表达式 -->
        <div class="title" :class="[isSelected ? 'selected' : '']">{{title}}</div>
        <div class="title" :class="[isSelected ? 'selected' : '', 'bg']">{{title}}</div>
        <!-- 直接使用 data 中的属性 -->
        <div class="title" :class="[isSelected ? 'selected' : '', bgClass]">{{title}}</div>
        <!-- lovue 组件使用 class 选择器，外部选择器 love-color 被添加到组件的跟选择器 -->
        <lovue class="love-color"></lovue>
        <!-- 样式 -->
        <div :style="{color: activeColor, fontSize: size + 'px'}">前端小课</div>
        <!-- data 属性 -->
        <div :style="titleStyle">前端小课</div>
        <!-- 计算属性 -->
        <div :style="nameStyle">前端小课</div>
        <!-- 过滤器添加属性 -->
        <div :style="size | nameFStyle">前端小课</div>
        <!-- 使用多个样式 -->
        <div v-bind:style="[baseStyles, bgStyles]">我是样式属性</div>
    </div>
    <script>
        // 定义一个组件
        Vue.component('lovue', {
            template: '<p class="love-title">Vue 虚拟实验室 by<span>Lovue</span></p>'
        });
const obj = {
    el: '#app',
    data: function () {
        return {
            title: '前端小课',
            isBlue: true,
            isSmall: false,
            isSelected: true,
            titleClass: {
                // blue 与 small 是选择器名
                blue: false,
                small: true
            },
            bgClass: {
                bg: true
            },
            activeColor: 'red',
            size: 26,
            titleStyle: {
                color: 'red',
                fontSize: '26px'
            },
            baseStyles: {
                color: 'red',
                fontSize: '20px'
            },
            bgStyles: {
                backgroundColor: 'blue'
            }
        }
    },
    computed: {
        subTitleClass: function () {
            return {
                // blue 和 small 是选择器名称
                blue: this.isBlue,
                small: this.isSmall
            }
        },
        nameStyle: function () {
            return {
                color: 'red',
                fontSize: '26px'
            }
        }
    },
    filters: {
        nameFStyle: function (size) {
            return {
                color: 'red',
                fontSize: size + 'px'
            }
            console.log('size = ', size);
        }
    },
    mounted() {
    },
    methods: {
        clickMe() {
            console.log('点我');
        },
        eventAction() {
            console.log('动态参数');
        }
    }
}
const vm = new Vue(obj);
    </script>
</body>

</html>