Comment définir le style dans vue

Méthode : 1. Utilisez l'attribut style de la balise pour ajouter un style en ligne ; 2. Utilisez la commande "v-bind" pour définir le style via la liaison 3. Définissez l'attribut vue sur le style avec la syntaxe " ; :style="obj" ” ou “:style="[obj,obj1...]"".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Vue définit le style

1. Ajoutez le style en ligne directement

2 Définissez le style via la liaison

3 Définissez l'attribut vue sur le style (les attributs vue peuvent être multiples)

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

Recommandations associées : "Tutoriel vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!