属性指令之class和style

目录

• 说明
• class
• style

说明

class与style本身是属性指令，但是他们比较特殊，应用更广泛。

# class
    :class='变量'
    变量可以为：字符串、数组、对象
    推荐使用数组，因为class可以使用多个参数
# style
    :style='变量'
    变量可以为：字符串、数组、对象
    推荐使用对象

class

# 先定义几个样式
    <style>
        .myfont{
            font-size: 100px
        }
        .mycolor{
            background-color: deeppink;
        }
        <!--测试class中的变量的简写-->
        .my-color2{
            color: green;
        }
    </style>
# 定义示例
<div id="app">
    <div :class="my_style">11111111</div>
</div>
# 定义样式
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 示例中使用的方法，数组
            my_style: ['myfont', 'mycolor'],
            // 使用字符串
            my_style2: 'myfont',
            // 使用对象方式,格式为  类名:true/false，类名的引号可以忽略单引号
            my_style3: {'myfont': true, 'mycolor2': true},
            // 上面的简写
            my_style3: {myfont: true, mycolor2: true}
            // 上面的简写有一个例外，就是当定义变量时有 - 符号，则不可以简写，如：
            my_style3: {myfont: true, mycolor2: true, 'my-color':true} // 这里的 my-color不能简写
        },
    })
</script>

效果如下：

后期也可以通过数组的一些方法追加或删除一些变量。

style

<div id="app">
    <div :style="my_style2">11111111</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            my_style: 'color: green; font-size:100px; backg',  // 字符串形式
            my_style2: [{'color': 'red'}, {'font-size': '100px'}],  // 数组形式，不带 - 符号的简写可以省略单引号
            // 上面的简写如下，带 - 符号的可以用驼峰体简写
            my_style3: [{color: 'red'}, {fontSize: '100px'}], // vm.my_style3[0].color='red'可修改样式
            my_style4: {color: 'red', fontSize: '100px'}  // 对象的形式写法，建议使用此方法，并且建议使用驼峰，因为可以使用my_style3.fontSize简写
        }
    })
</script>