使用Class为元素绑定样式
1、 使用第一种方式,直接传递一个数组
2、 在数组中使用三元表达式
3、 通过对象适用,提高代码可读性
4、 直接使用对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></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> -->
<!-- 第一种使用方式,直接传递一个数组,注意:这里的class需要使用v-bind(用冒号绑定)做数据绑定-->
<!-- <h1 :class="['thin','italic']">这是一个很大的H1</h1> -->
<!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['thin','italic',flag?'active':'']">这是一个很大的H1</h1> -->
<!-- 通过对象使用,提高代码可读性-->
<!-- <h1 :class="['thin','italic',{'active':flag}]">这是一个很大的H1</h1> -->
<!-- 直接使用对象-->
<h1 :class="classobj">这是一个很大的H1</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true,
classobj:{red:true,thin:true,italic:false,active:false}
},
method:{
}
})
</script>
</body>
</html>