Vue屬性繫結指令 -- v-bind
阿新 • • 發佈：2020-08-11
Vue屬性繫結指令 -- v-bind
可簡寫為 ：
普通屬性:頁面可解析為id=“4”
<p v-bind:id="2*2">{{msg}}</p>
class屬性繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <style> .red { background: red; } .big { font-size: 4em; } </style> <body> <div id="app"> <p class='red'>這是一個p段落標籤...</p> <!--繫結red屬性 --> <p v-bind:class='redColor'>這是一個p段落標籤...</p> <!-- 當點選時，屬性值切換 --> <p @click="flag=!flag" :class='{red:flag}'>這是一個p段落標籤...</p> <!-- 繫結big和red屬性 --> <p class='big' :class="{'red':true}">這是一個p標籤..</p> <!-- 以陣列形式繫結big和red屬性 --> <p :class="['big','red']">這是一個p標籤..</p> <!-- 繫結big,判斷flag的值是否為true，為true時繫結red屬性 --> <p :class="['big',(flag?'red':'')]">這是一個p標籤..</p> <!-- 繫結big,判斷flag的值是否為true，為true時繫結red屬性 --> <p class='big' :class='flag?"red":""'>這是一個p標籤..</p> <!-- 行內樣式繫結 --> <p :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</p> </div> <script> var vm = new Vue({ el:"#app", data:{ redColor:'red', flag:true, activeColor: 'green', fontSize: 30 } }) </script> </body> </html>