vue2_繫結樣式、條件渲染
阿新 • • 發佈：2022-04-03
1繫結樣式
-
寫法：
:class="xxx"，xxx可以是字串、陣列、物件 -
:style="[a,b]"其中a、b是樣式物件 -
:style="{fontSize: xxx}"其中 xxx 是動態值
字串寫法適用於：類名不確定，要動態獲取
陣列寫法適用於：要繫結多個樣式，個數不確定，名字也不確定
物件寫法適用於：要繫結多個樣式，個數確定，名字也確定，但不確定用不用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始vue</title> <!-- 引入vue--> <script src="/vueBaseJs/vue.js"></script> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; } </style> </head> <body> <div id="root"> <!-- 繫結class樣式--字串寫法。使用場景：樣式的類名不確定，需要動態指定--> <div class="basic " v-bind:class="mood" v-on:click="changeMood">{{name}}</div> <br/><br/> <!-- 繫結class樣式--陣列寫法。使用場景：樣式的個數不確定，名字也不確定--> <div class="basic " v-bind:class="classArr" >{{name}}</div><br/><br/> <!-- 繫結class樣式--陣列寫法。使用場景：樣式的個數確定，名字也確定，但要動態決定用不用--> <div class="basic " v-bind:class="classObj" >{{name}}</div><br/><br/><br/> <!-- 繫結style樣式--物件寫法。 --> <div class="basic " v-bind:style="styleObj1" >{{name}}</div><br/> <!-- 繫結style樣式--陣列寫法。 --> <div class="basic " v-bind:style="styleArr" >{{name}}</div> </div> <script> Vue.config.productionTip=false;//阻止vue啟動時生成生產提示 const vm=new Vue({ el:"#root", data:function(){ return { name:"張三", mood:"normal", classArr:["atguigu1","atguigu2","atguigu3"], classObj:{ atguigu1:false,//屬性名要和樣式名保持一致，不然開啟後找不到該樣式。這樣通過設定屬性值為true即可啟用該樣式(.atguigu1) atguigu2:false, atguigu3:false }, styleObj1:{ fontSize:"40px", color:"red" }, styleArr:[ {//和css樣式物件寫法一致 fontSize:"40px", color:"red" }, {//和css樣式物件寫法一致 backgroundColor:"skyblue" } ], } }, methods: { changeMood:function(event){ const arr=["happy","sad","normal"]; let rd=Math.floor(Math.random()*3); this.mood=arr[rd]; } }, }); </script> </body> </html>