008.关于样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_41619240/article/details/116866794

样式绑定

01. class绑定

（1）对象方法

通过 true | false来控制class是否启用

<div :class="{ class1: show1, class2: show2 }">内容</div>
<div :class="classObj">内容</div>
// class1、class2 都是已经定义好的类名
<script>
    export default {
        data(){
            return {
                show1: true,
                show2: false,
                // 也可以直接写成对象形式
                classObj: {
                    class1: true,
                    class2: false
                }
            }
        }
    }

</script>

（2）数组方法

将class类写在数组内

<div :class="[ activeClass1, activeClass2 ]"></div>
// class1、class2 都是已经定义好的类名
<script>
    export default {
        data(){
            return {
                activeClass1: 'class1',
                activeClass2: 'class2'
            }
        }
    }
</script>

三元运算

<div :class="[ isActive ? activeClass1 : activeClass2 ]"></div>
<script>
    export default {
        data(){
            return {
                // 通过 isActive 来控制显示 class1 或者 class2
                isActive: true,
                activeClass1: 'class1',
                activeClass2: 'class2'
            }
        }
    }
</script>

数组内的对象
- 对数组中其中一个元素单独使用对象的形式进行判断
```
<div :class="[ { 'class2':isActive }, activeClass1 ]"></div>
```

（3）计算属性

或者返回一个对象或者数组的计算属性

<div v-bind:class="classObject"></div>
<script>
    export default {
        data: {
            isActive: true
        },
        computed: {
            classObject: function () {
                return {
                    class1: this.isActive,
                }
            }
        }
    }
</script>

02. 内联样式

v-bind:style 的对象语法十分直观
- 看着非常像 CSS，但其实是一个 JavaScript 对象
- CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (‘kebab-case’，记得用引号括起来) 来命名

（1）对象语法

可以在 v-bind:style 直接设置样式

<div id="app">
    <div :style="{color: cl, background: bg, fontSize: fz+'px'}"> 内联样式 </div>
    <div :style="styleObj"> 样式对象 </div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            cl: 'red',
            bg: 'yellow',
            fz: 20,
            // 或者将样式直接绑定到一个样式对象
          styleObj: {
                color: 'red',
                background: 'yellow',
                fontSize: '20px',
            }
        }
    })
</script>

（2）数组语法

数组语法可以将多个样式对象应用到同一个元素上

<div :style="[styleObj1, styleObj2]"></div>
<script>
    new Vue({
        el: '#app',
        data:{
            styleObj1: {
                color:'red',
                background:'yellow'
            },
            styleObj2: {
                fontSize: '20px',
                fontWeight: 'bold'
            }
        }
    })
</script>