Vue中通过属性绑定为元素设置class类样式
程序员文章站
2022-03-03 09:16:41
...
1.数组
<h1 :class="['red','italic']">这是一个很大的H1,大到你无法想象</h1>2.数组中使用三元表达式
<h1 :class="['thin','italic',isactive?'active':'']">这是一个很大的H1,大到你无法想象</h1>3.数组中嵌套对象
<h1 :class="['thin','italic',{'active':isactive}]">这是一个很大的H1,大到你无法想象</h1>4.直接使用对象
<h1 :class="{red:true,italic:true,active:false}">这是一个很大的H1,大到你无法想象</h1>完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="['red','italic']">这是一个很大的H1,大到你无法想象</h1>
<!--在数组中使用三元表达式-->
<h1 :class="['thin','italic',isactive?'active':'']">这是一个很大的H1,大到你无法想象</h1>
<!--在数组中使用对象来代替三元表达式，提高代码可读性-->
<h1 :class="['thin','italic',{'active':isactive}]">这是一个很大的H1,大到你无法想象</h1>
<!--在为class用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，也可不带。属性的值是一个标识符 -->
<h1 :class="classObj">这是一个很大的H1,大到你无法想象</h1>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
isactive:true,
classObj:{red:true,italic:true,active:false},
},
});
</script>
</html>