对象形式
<style>
.active {
color: red;
}
</style>
<div id="app">
<p :class="{active:isactive}">学习vue的第二天</p>
<!-- <p :class="getActive()">学习vue的第二天</p> -->
<input type="button" value="切换" @click="changeActive">
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
isactive: true,
}
},
methods: {
getActive() {
return {
active: this.isactive
}
},
changeActive() {
this.isactive = !this.isactive;
}
}
})
</script>
</body>
数组形式
<style>
.active {
color: red;
}
</style>
<div id="app">
<h2 class="title" :class="['active','line']">{{msg}}</h2>
<h2 class="title" :class="[active,line]">{{msg}}</h2>
<h2 class="title" :class="addClass()">{{msg}}</h2>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
msg: "你好啊",
active: "aaa",
line: "bbb"
}
},
methods: {
addClass() {
return [this.active, this.line]
}
}
})
</script>