11 vue 中样式class

style默认声明样式有以下几个

 

<style>
/* 红色 */
.red {
color: red;
}
/* 瘦 */
.thin {
font-weight: 200;
}
/* 倾斜 */
.italic {
font-style: italic;
}
/* 激活 */
.active {
/* 字符间距-中文起作用 */
letter-spacing: 0.5em;
/* word-spacing是英文起作用 */
}
</style>

data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},

 

1.普通操作

<!-- 普通操作， 红色，变细 -->
<h1 class="red thin">这是普通的操作，红色变细！！！</h1>

2.直接传递数组， class动态绑定

注意 ：<!-- 类名必须用单引号包起来 -->
<h1 :class="['thin' ,'red']">这是v-bind绑定的数组形式</h1>

3.使用三元表达式

<h2  :class="['thin'  ,'italic' ,flag ? 'active' :'' ]">我是三元表达式操作</h2>

4.<!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->

<h2  :class="['red' ,'italic' , {'active' :flag}]">对象来代替三元表达式</h2>

5.   <!-- 在为 class 动态绑定，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，可以不写；  属性的值 是一个标识符 -->

  <h2  :class="{ red:true ,thin :true, italic :false }">直接使用对象形式</h2>

如果是对象默认在data中写了。也可以直接用

<h1 :class="classObj">直接使用对象形式2！</h1>