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>

原文地址：https://www.cnblogs.com/xuchao0506/p/10805605.html