Maison > Article > interface Web > 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="'background-color: red;'">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!