vue学习 vue中样式 class 定义引用

Posted 2021-11-26 xuchao0506

//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>