VUE.JS中的样式 -class 绑定（笔记）
程序员文章站
2022-05-15 22:38:50
...
方法大概可以分为三种
- 直接传递一个数组,注意:这里的class需要使用 v-bind: 作数据绑定
<h1 :class="['thin','red','italic']">这是一个很大很大的H1</h1>
- 在数组中使用三元表达式
<h1 :class="['thin','red','italic',flag?'active':'']">
这里的flag是在data中定义的，具体可以翻到本文最下面的整个代码查看
- 在数组中使用嵌套对象来代替三元表达式,提高代码可读性，这里对象中的属性名可以带引号也可以不带引号,即 {active:flag}
<h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大很大的H1</h1>
- 在为class使用v-bind绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里我没有写引号; 属性的值是一个标识符
<h1 :class="{red:true,thin:true,italic:true,active:true}">这是一个很大很大的H1</h1>
- 或者直接将对象放在Vue对象的data中
<h1 :class="classObj">这是一个很大很大的H1</h1>
classObj对象已经在data中定义了
最后附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/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> -->
<!-- 第一种使用方式,直接传递一个数组,注意:这里的class需要使用 v-bind: 作数据绑定 -->
<!-- <h1 :class="['thin','red','italic']">这是一个很大很大的H1</h1> -->
<!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['thin','red','italic',flag?'active':'']">这是一个很大很大的H1</h1> -->
<!-- 在数组中使用嵌套对象来代替三元表达式,提高代码可读性 -->
<!-- 这里对象中的属性名可以带引号也可以不带引号,即 {active:flag} -->
<!-- <h1 :class="['thin','red','italic',{'active':flag}]">这是一个很大很大的H1</h1> -->
<!-- 在为class使用v-bind绑定对象的时候,对象的属性是类名,由于对象的属性可带引号,也可不带引号,所以这里我没有写引号; 属性的值是一个标识符 -->
<!-- <h1 :class="{red:true,thin:true,italic:true,active:true}">这是一个很大很大的H1</h1> -->
<!-- 或者直接将对象放在Vue对象的data中 -->
<h1 :class="classObj">这是一个很大很大的H1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj:{red:true,thin:true,italic:true,active:true}
},
methods: {
}
});
</script>
</body>
</html>