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 } } });
```