VUE使用的樣式
1. 數組
```
<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>
<body> <style> .red{ color: red; } .find{ font-style: italic; } </style> <!-- 使用v-bind 來綁定class屬性 --> <div class="box"> <h1 :class="['red','find']">這是一個大大的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{
//或者在這里定義數組 //classel:['a','b'] } }); </script> </body>
```
2. 數組中使用三元表達式
```
<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>
<body> <style> .red{ color: red; } .find{ font-style: italic; } </style> <!-- 使用v-bind 來綁定class屬性 --> <div class="box"> <!-- 使用三元運算符綁定 --> <!-- 首先在vm對象data數據中 添加一個變量，isfind=true，h1中isfind?'find':'' isfind 是變量 不用加引號，find是樣式 要加引號記住 --> <h1 :class="['red',isfind?'find':'']">這是一個大大的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ isfind:false } }); </script> </body>
```
3. 數組中嵌套對象
```
<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>
```
<div class="box"> <!-- 數組中嵌套對象 --> <!-- 在數組中直接寫一個{}對象，其中‘find’：isfind 是樣式find，如果是true 就應用vm data中的isfind，否則不應用 --> <h1 :class="['red',{'find':isfind}]">這是一個大大的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ isfind:true } }); </script> </body>
4. 直接使用對象
```
<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>
<div class="box"> <!-- 直接使用對象 --> <!-- 在Vue對象中，data中直接寫上樣式的名稱 --> <!-- 也可以寫成 <h1 :class="{find:true,red:ture}">這是一個大大的h1</h1> --> <h1 :class="classobj">這是一個大大的h1</h1> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ classobj:{ red:true,find:true } } });
```