vue之style与class样式绑定

class绑定有三种：直接绑定一个class类名，数组，对象

style的绑定形式：1.{color: wzys, fontSize: fs + 'px'} 2.:style="[obj, obj1]"。

具体实例如下。

<template>
    <div class="jz">
        <div class="subJz">
            <p :class="'utest3'">这是测试文字1</p>
            <p :class="ys">这是测试文字2</p>
            <p :class="[ys, ys1, 'utest3']">这是测试文字3</p>
            <p :class="{utest: true, utest1: true, utest2: false}">这是测试文字4</p>

            <p :style="{color: wzys, fontSize: fs + 'px'}">这是测试文字5</p>
            <p :style="{color: 'pink', fontSize: 30 + 'px'}">这是测试文字6</p>
            <p :style="[obj, obj1]">这是测试文字7</p>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                ys: 'utest',
                ys1: 'utest1',
                ys2: 'utest2',
                ym: true,
                fs: 20,
                wzys: 'purple',
                obj:{
                    backgroundColor: 'red'
                },
                obj1:{
                    color: 'gold'
                },
            }
        },
    }
</script>

<style>
    .utest {
        color: blue
    }
    .utest1 {
        background: yellow;
    }
    .utest2 {
        color: yellow;
    }
    .utest3 {
        color: red;
    }
    .jz {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: 1px solid green;
        text-align: center
    }

    .subJz {
        width: 500px;
        height: 300px;
        border: 1px solid gold
    }
</style>