<!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/dist/vue.js"></script>
<!-- vueCD -->
</head>
<style>
.active{
color: rebeccapurple;
}
.line{
background-color: royalblue;
}
</style>
<body>
<div id="app">
<h1 :class="{active:isActive,line:isLine}">{{msg}}</h1>
<!-- 此处表示的是动态绑定类名,在一个对象里面,这是两个类名,
此时active这个类名为true,所以会执行active这个类名,如果line也改为true,
则h1就会出现两个类名 -->
<button v-on:click='btnClick'>按钮</button>
<!-- 此时当我们点击按钮的时候,会执行btnClick这个函数,通过控制
isActive和isLine的布尔值,可以实现,类名的添加和取消 -->
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
msg:'你好,中国',
isActive:true,
isLine:true
},
methods: {
btnClick(){
this.isActive = !this.isActive
this.isLine = !this.isLine
}
}
})
</script>
</body>
</html>
VUE控制多个类名的添加
最新推荐文章于 2024-05-08 12:25:39 发布