[Vue]样式绑定 :class :style-526互联

1. class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

1) 字符串写法适用于: 类名不确定，要动态获取。

2) 数组写法适用于: 要绑定多个样式，个数不确定，名字也不确定。

3) 对象写法适用于: 要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

1) :style="{ fontSize: xxx }"其中xxx是动态值。（不太常用）

2) :style="[a,b]"其中a、b是样式对象。（几乎用不到）

<body>
    <div id="root">
        <!-- class写法 -->
        <!-- 1. 字符串写法，适用于：样式的类名不确定，要动态指定 -->
        <div class="basic" :class="mode" @click="changeClass">hello</div> <br><br>
        <!-- 2. 数组写法，适用于：样式的数量不确定，类名也不确定 -->
        <div class="basic" :class="mode_arr">hello</div> <br><br>
        <!-- 3. 对象写法，适用于：样式的数量、类名确定，但要动态决定是否使用 -->
        <div class="basic" :class="mode_obj">hello</div> <br><br>

        <!-- style写法 -->
        <!-- 1.对象写法，不常用 -->
        <div class="basic" :style="style_obj1">hello</div> <br><br>
        <!-- 2.数组写法，极其不常用 -->
        <div class="basic" :style="[style_obj1, style_obj2]">hello</div> <br><br>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#root",
        data: {
            mode: '',
            mode_arr: ['happy', 'normal', 'sad'],
            mode_obj:{
                happy: true,
                normal:true,
                sad: false
            },
            style_obj1:{
                fontSize: '80px',
                color: 'red'
            },
            style_obj2:{
                backgroundColor: 'orange'
            }
        },
        methods: {
            changeClass() {
                var r = Math.floor(Math.random() * 3)
                console.log(r)
                this.mode = this.mode_arr[r]
            }
        },
    })
</script>

styled-components components classes styled