在Vue中使用样式

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

```