class類繫結
阿新 • • 發佈：2020-09-10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class類繫結</title> <style> .red{color: red} .big{font-size: 30px} .big-1{font-size: 40px} .italic{font-style: italic} </style> </head> <body> <!-- 注意點： 在vue的指令中，如果沒有帶引號，那麼會被當做變數來解析， 就會去vue裡面找，如果沒有找到，就會報錯 如果帶引號了，就會被直接當成字串來解析 --> <!--<p class="red" style="font-size: 30px"></p>--> <div id="app"> <!--1、用變數的方式--> <!-- <p v-bind:class="red">{{msg}}</p>--> <!--2、用字串的方式--><!-- <p v-bind:class="'red big italic'">{{msg}}</p>--> <!--3、陣列的方式--> <!--會依次將數組裡面的元素解析到class屬性裡面--> <!--在數組裡面放字串--> <!-- <p v-bind:class="['red','big']">{{msg}}</p>--> <!--在數組裡面放變數--> <!-- <p v-bind:class="[red1,'big']">{{msg}}</p>--> <!--在數組裡面放三元表示式--> <!-- <p v-bind:class="[red1,isBig?'big':'']">{{msg}}</p>--> <!--在數組裡面放物件--> <!-- <p v-bind:class="[red1,{'big':false}]">{{msg}}</p>--> <!--4、物件的方式--> <!--物件裡面屬性名對應的屬性值為true的話，就把屬性名繫結到class屬性--> <!-- <p v-bind:class="{big:true}">{{msg}}</p>--> <!-- <p v-bind:class="{'big-1':true}">{{msg}}</p>--> <!-- <p v-bind:class="{'big':true,'red':true}">{{msg}}</p>--> <!-- <p v-bind:class="class2">{{msg}}</p>--> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:'#app', //element data:{ msg:'歡迎來到vue的世界', red:'red', red1:'red italic', isBig:false, class2:{'big':true,'red':true} } }); </script> </body> </html>