vue学习(八) vue中样式 class 定义引用

//style
<style>
.red{
color:red;
}
.thin{//字体粗细
font-weight:200
}
.italic{//字体倾斜
font-style:italic
}
.active{//字符间距
letter-spacing: 0.5em
}
</style>
//html
<div id="app">
//传统方式
<h1 class="red thin" >红红火火</>
//使用v-bind绑定 要注意 必须用数组方式，并且每个class都必须被单引号包着
//并且支持三目运算符
<h1 :class="['thin','red',flag?'active':''s]">红红火火恍恍惚惚</h1>
//这种方式也可以 如果flag为false的话 class就没有active
<h1 :class="['thin','red',{'active':true}]"></h1>
//在位class使用v-bind绑定对象的时候，对象的属性是类名 ，对象属性可带引号可不带引号 属性值是一个标识符
<h1 :class="{ red:true, thin:true, italic:false, active:false }"></h1>
//这样也可以
<h1 ：class="classObj"> </h1>
</div>//script
<script>
var vm = new Vue({
el:'app',
data:{
msg: '点击一下'，
flag: true,
classObj:{ red:true, thin:true, italic:false, active:false}
},
methods:{//methods中定义了当前vue实例中所有可用的方法

}
})
</script>