Vue中类样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中样式class</title>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.js"></script>
<style>
.red{
color:red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em
;
}
</style>
</head>
<body>
<div id="app">
<h1 class="red thin">这是一个很大很大的H1,大到你无法想象</h1>
<h1 :class="['thin','italic']">这是一个很大很大的H1,大到你无法想象</h1><!--第一种使用方式,直接传递一个数组,
注意:这里的class需要使用v-bind做数据绑定-->
<h1 :class="['thin','italic',flag?'active':'']">这是一个很大很大的H1,大到你无法想象</h1><!--在数组中使用三元表达式-->
<h1 :class="['thin','italic',{'active':flag}]">这是一个很大很大的H1,大到你无法想象</h1><!--在数组中使用对象来代替三元表达式,提高代码的可读性-->
<h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个很大很大的H1,大到你无法想象</h1>
<!-- 在为class使用v-bind绑定对象时,对象的属性是类名,由于对象的属性可带引号,也可以不带引号,所以没写引号,属性的值是一个标识符-->
<h1 :class="classobj">这是一个很大很大的H1,大到你无法想象</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false,
classobj:{red:true,thin:true,italic:false,active:false}
},
methods: {}
})
</script>
</body>
</html>