一、使用class样式
1、数组
<h2 :class=['blue','small']>哈哈哈我是个h2</h2>
2、数组中使用三元表达式
<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>
3、数组中嵌套对象
在数组中用嵌套对象来代替三元表达式,提高代码可读性
<h2 :class="['blue','small',{'active':isactive}]">哈哈哈我是个h2</h2>
4、直接使用对象
在为class使用v-bind绑定对象时,对象的属性是类名。
对象的属性可带引号或不带引号
属性的值是一个标识符
<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>
【代码实现】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title&g