vue的style绑定对象语法,可以将多个样式对象应用到同一个元素上\ <div :style="{fontSize:f

对象语法,可以将多个样式对象应用到同一个元素上
<div :style="{fontSize:fontSize,color:'yellowgreen'}">
数组语法,可以将多个样式对象应用到同一个元素上
<div :style="[width,height,color]">{{msg2}}</div>">

<body>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>

    </script>
    <div id="app">
        <div style="color: red;">{{msg}}</div>
        <!--对象语法,可以将多个样式对象应用到同一个元素上  -->
        <div :style="{fontSize:fontSize,color:'yellowgreen'}"> {{msg1}}</div>
        <!-- 数组语法,可以将多个样式对象应用到同一个元素上 -->
        <div :style="[width,height,color]">{{msg2}}</div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "普通样式",
                msg1: "使用变量",
                msg2: "宽高变为两倍",
                fontSize: '23px',
                n: true,
                width: {
                    width: "200px"
                },
                height: {
                    height: "200px"
                },
                color: {
                    color: "purple"
                }
            },

        })
    </script>
</body>