How to set style in vue

Method: 1. Use the style attribute of the tag to add an inline style; 2. Use the "v-bind" command to set the style style through binding; 3. Set the vue attribute to the style with the syntax ":style ="obj"" or ":style="[obj,obj1...]"".

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vue sets style

1. Add inline style directly

2. Set style through binding

3. Set vue's attributes as styles (vue attributes can be multiple)

<div id="box">
            <!--直接添加样式-->
            <p style="background-color: blue;">sssss</p>
            <!--绑定样式-->
            <p v-bind:style="&#39;background-color: red;&#39;">sssss</p>
            <!--将vue中的属性作为样式设置-->
            <p :style="obj">sssss</p>
            <!--将多个属性作为样式设置-->
            <p :style="[obj,obj1]">sssss</p>
        </div>
        <script type="text/javascript">
            var vm=new Vue({
                el:"#box",
                data:{
                    obj:{
                        backgroundColor:"gold"
                    },
                    obj1:{
                        fontSize: "30px"
                    }
                },
            });
        </script>

Related recommendations: "vue.js Tutorial"

The above is the detailed content of How to set style in vue. For more information, please follow other related articles on the PHP Chinese website!