前端框架Vue学习02 ——样式

假定设定样式

<style>
        .red {
            color: red;
        }
        .thin{
            font-weight: 100;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
    </style>

一般处理

<h1 class="red thin">很大的东西</h1>

使用class样式

1、数组形式
直接传递一个数组，这里的class需要使用v-bind做数据绑定

<h1 :class="['thin','italic','red']">第一种</h1>

好像和一般处理方式没多大差别
2、数组中使用三元表达式

<h1 :class="['thin','italic',flag?'active':'']">第二种</h1>

需要在data对flag进行初始化

 data:{
       flag:true,
 },

上述三元表达式即表示如果flag为true，则显示active样式，否则为空。
3、数组中嵌套对象

<!-- 数组中使用对象来代替三元表达式 -->
<h1 :class="['thin','italic',{'active':flag}]">第3种</h1>

4、直接使用对象

<!--在为class 使用v-bind 绑定对象的时候 对象的属性是类名，
由于对象的属性可带也可不带引号，这里没写，属性的值是标识符-->
<!-- classObj 为属性的引用-->
<h1 :class="classObj">第4种</h1>

在data中进行定义