22.Vue绑定class样式

article/2025/10/2 17:38:02

1.绑定class样式-字符串写法（适用于样式的类名不确定，需要动态指定）

2.绑定class样式-数组写法（适用于样式的个数不确定，名字也不确定）

3.绑定class样式-对象写法（适用于样式的个数确定，名字也确定，但要动态决定用不用）

为了讲好class样式，我们这里提前准备了7个样式作为例子来讲解。

        .basic{width:400px;height:100px;border: 1px solid black;}.happy{border:4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:4px dashed rgb(2,197,2);background-color: gray;}.normal{background-color: skyblue;}.add1{background-color: yellowgreen;}.add2{font-size: 30px;text-shadow: 2px 2px 10px red;}.add3{border-radius:20px;}

basic就是最基本的边框。happy,sad,normal代表了3种心情，这三种心情在设置的时候需要3选一。这三个不能同时应用。

而add1,add2,add3是可以同时使用的

咱们先看看这两部分样式的效果：

互斥部分：

兼容部分：

讲到这里7个样式我们就说完了，接下来我们就操作一下。

1.绑定class样式-字符串写法（适用于样式的类名不确定，需要动态指定）

需求1：basic是基础的，点击div将样式从normal切换为happy

这个时候有人就会想这样去实现，给这个div绑定点击事件，在事件中根据这个div的id获取元素，然后修改className = 'basic happy'。

这样写虽然可以实现功能，但是对于Vue来说是违规的。因为这样操作相当于我们自己去操作DOM，而Vue的思想恰恰是不让用户自己去操作DOM。

basic是固定不变的，normal和happy是动态变化的，为了解决这样的问题，Vue允许用户这样去做。不变的属性正常写，变化的属性通过绑定属性来写，最终它会将两个属性合并为一个属性进行展示。如下：

<!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>绑定样式</title><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width:400px;height:100px;border: 1px solid black;}.happy{border:4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:4px dashed rgb(2,197,2);background-color: gray;}.normal{background-color: skyblue;}.add1{background-color: yellowgreen;}.add2{font-size: 30px;text-shadow: 2px 2px 10px red;}.add3{border-radius:20px;}</style>
</head>
<body><!--准备好一个容器--><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止Vue在启动时生成生产提示new Vue({el:'#root',data:{name:'class样式',mood:'normal'},methods: {changeMood(){this.mood = 'happy'}},})
</script>
</html>

实现效果：

需求2：点击div，随机切换心情样式。

<!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>绑定样式</title><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width:400px;height:100px;border: 1px solid black;}.happy{border:4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:4px dashed rgb(2,197,2);background-color: gray;}.normal{background-color: skyblue;}.add1{background-color: yellowgreen;}.add2{font-size: 30px;text-shadow: 2px 2px 10px red;}.add3{border-radius:20px;}</style>
</head>
<body><!--准备好一个容器--><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止Vue在启动时生成生产提示new Vue({el:'#root',data:{name:'class样式',mood:'normal'},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})
</script>
</html>

实现效果：

2.绑定class样式-数组写法（适用于样式的个数不确定，名字也不确定）

需求：basic是基础的，将add1,add2,add3的样式进行绑定，便于以后增加删除

<!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>绑定样式</title><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width:400px;height:100px;border: 1px solid black;}.happy{border:4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:4px dashed rgb(2,197,2);background-color: gray;}.normal{background-color: skyblue;}.add1{background-color: yellowgreen;}.add2{font-size: 30px;text-shadow: 2px 2px 10px red;}.add3{border-radius:20px;}</style>
</head>
<body><!--准备好一个容器--><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br><div class="basic" :class="classArr" >{{name}}</div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止Vue在启动时生成生产提示new Vue({el:'#root',data:{name:'class样式',mood:'normal',classArr:['add1','add2','add3']},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})
</script>
</html>

实现效果：

3.绑定class样式-对象写法（适用于样式的个数确定，名字也确定，但要动态决定用不用）

需求：有两个样式add1和add2,但这两个样式用不用是可以动态组合的。

<!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>绑定样式</title><!--引入Vue--><script type="text/javascript" src="../js/vue.js"></script><style>.basic{width:400px;height:100px;border: 1px solid black;}.happy{border:4px solid red;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border:4px dashed rgb(2,197,2);background-color: gray;}.normal{background-color: skyblue;}.add1{background-color: yellowgreen;}.add2{font-size: 30px;text-shadow: 2px 2px 10px red;}.add3{border-radius:20px;}</style>
</head>
<body><!--准备好一个容器--><div id="root"><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br><div class="basic" :class="classArr" >{{name}}</div> <br><div class="basic" :class="classObj" >{{name}}</div></div>
</body><script type="text/javascript">Vue.config.productionTip = false //阻止Vue在启动时生成生产提示new Vue({el:'#root',data:{name:'class样式',mood:'normal',classArr:['add1','add2','add3'],classObj:{add1:false,add2:false}},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})
</script>
</html>

实现效果：