So legen Sie den Stil in Vue fest

Methode: 1. Verwenden Sie das Stilattribut des Tags, um einen Inline-Stil hinzuzufügen. 2. Verwenden Sie den Befehl „v-bind“, um den Stilstil durch Bindung festzulegen. 3. Setzen Sie das Vue-Attribut auf den Stil mit der Syntax. :style="obj" ” oder „:style="[obj,obj1...]"".

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Vue legt den Stil fest

1. Fügen Sie den Stil durch Bindung ein

3. Legen Sie das Vue-Attribut auf den Stil fest (Vue-Attribute können mehrere sein)

<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>

Verwandte Empfehlungen: „

“

Das obige ist der detaillierte Inhalt vonSo legen Sie den Stil in Vue fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!