vue——19-样式设置-class和style

样式设置-class

css

        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }

html

<div id="app">
    <!--1.数组 （v-bind绑定，类名需要加引号）-->
    <h1 :class="['red','thin']">hello 你好</h1>

    <!--2.在数组中使用三目表达式-->
    <h1 :class="['red','thin',flag?'active':'']">hello 你好</h1>

    <!--3.在数组中使用对象来代替三目，提高可读性-->
    <h1 :class="['red','thin',{'italic':flag}]">hello 你好</h1>

    <!--4.对象 （v-bind绑定，类名可带引号，也可不带）-->
    <h1 :class="{red:false,thin:true,active:true,italic:true}">hello 你好</h1>

    <!--5.对象也可放data中引用-->
    <h1 :class="classObj">hello 你好</h1>
</div>

js

        {
            let vm = new Vue({
                el: '#app',
                data: {
                    flag: true,
                    classObj: {red: false, thin: true, active: true, italic: true}
                },
                methods: {}
            })
        }

样式设置-style

html

<div id="app">
    <!--1.对象的无序键值对的集合-->
    <!--注意：color这种单独词不用加引号，但是font-weight这种中间-连接需要加引号，或使用驼峰式命名-->
    <h1 :style="{color:'red', 'font-weight':200, marginTop:'100px'}">这是世界h1</h1>

    <!--2.对象在data中引用-->
    <h1 :style="styleObj1">这是世界h1</h1>

    <!--3.通过数组在data中引用多个对象样式-->
    <h1 :style="[styleObj1, styleObj2]">这是世界h1</h1>
</div>

js

        {
            let vm = new Vue({
                el: '#app',
                data: {
                    styleObj1: {color: 'red', 'font-weight': 200},
                    styleObj2: {'font-style': 'italic'}
                },
                methods: {}
            })
        }