动态绑 class
如果下面看着烦，看这
第一种写法是使用字符串变量来作为类名，通过动态获取来改变样式。
第二种写法是使用对象，在对象中设置类名作为属性名，通过修改属性值来控制类名是否添加。
第三种写法是将第二种写法中的对象放到data配置项中，作为变量来处理。
第四种写法是将对象变量放到数组中，可以同时应用多个样式。
这四种写法逐渐增加了复杂度和灵活性，可以根据实际需求选择适合的写法来实现样式的动态绑定。
class样式
写法:
class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
第一种写法
box 是一个变量，值为class类名
<div :class="box"> hello Vue </div>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态样式</title>
<style>
.box1 {
width: 100px;
height: 100px;
border: 1px red solid;
}
.box2 {
width: 200px;
height: 200px;
border: 2px pink solid;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :class="box"> hello Vue </div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
box: "box1"
}
})
</script>
</body>
</html>
第二种写法
对象属性名为类名，值为布尔值，通过修改布尔值来控制类名是否添加
<div :class="{'box1':true}"> hello Vue </div>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态样式</title>
<style>
.box1 {
width: 100px;
height: 100px;
border: 1px red solid;
}
.box2 {
width: 200px;
height: 200px;
border: 2px pink solid;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :class="{
'box2':isBox2}"></div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
box: "box2",
isBox2: "true"
}
})
</script>
</body>
</html>
第三种写法
将第二种写法里写在样式里的对象放到data配置项中，作为变量来处理
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态样式</title>
<style>
.base {
text-align: center;
color: red;
}
.box1 {
width: 100px;
height: 100px;
border: 1px red solid;
}
.box2 {
width: 200px;
height: 200px;
border: 2px pink solid;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :class="boxObj"> hello Vue </div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
boxObj: {
'box1': true,
'base': true
}
}
})
</script>
</body>
</html>
第四种写法
将对象变量放到数组里面
<div :class="[boxObj,boxObj2]"> hello Vue <div>
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态样式</title>
<style>
.base {
text-align: center;
color: red;
}
.box1 {
width: 100px;
height: 100px;
border: 1px red solid;
}
.box2 {
width: 200px;
height: 200px;
border: 2px pink solid;
}
.boxShadow {
box-shadow: 5px 5px 5px #aaa;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :class="[boxObj,boxObj2]"> hello Vue </div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
boxObj: {
'box1': true,
'base': true
},
boxObj2: {
'boxShadow': true
}
}
})
</script>
</body>
</html>
可以发现这四种写法是层层递进的关系
完整代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态样式</title>
<style>
.base {
text-align: center;
color: red;
}
.box1 {
width: 100px;
height: 100px;
border: 1px red solid;
}
.box2 {
width: 200px;
height: 200px;
border: 2px pink solid;
}
.boxShadow {
box-shadow: 5px 5px 5px #aaa;
}
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div :class="box"> hello Vue </div>
<div :class="{
'box2':isBox2,'base':isBase}"> hello Vue </div>
<div :class="boxObj"> hello Vue </div>
<div :class="[boxObj,boxObj2]"> hello Vue </div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
box: "box2",
isBox2: true,
isBase: true,
boxObj: {
'box1': true,
'base': true
},
boxObj2: {
'boxShadow': true
}
}
})
</script>
</body>
</html>
效果图例
简单用用吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态绑定样式示例</title>
<style>
.btn {
padding: 10px 20px;
background-color: #eee;
border: none;
cursor: pointer;
outline: none;
}
.red {
color: red;
}
.blue {
color: blue;
}
.yellow-bg {
background-color: yellow;
}
.green-bg {
background-color: green;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button :class="[btnClass, bgColorClass]" @click="changeStyles">点击我</button>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
btnClass: "red",
bgColorClass: "yellow-bg"
},
methods: {
changeStyles() {
// 切换文字颜色和背景颜色
this.btnClass = this.btnClass === "red" ? "blue" : "red";
this.bgColorClass = this.bgColorClass === "yellow-bg" ? "green-bg" : "yellow-bg";
}
}
})
</script>
</body>
</html>
如上，我们使用Vue框架来创建一个Vue实例，并将其绑定到id为"app"的元素上。在数据中，我们定义了btnClass和bgColorClass这两个变量，分别控制按钮的文字颜色和背景颜色。
在按钮上使用了:class指令来动态绑定类样式。通过绑定的变量来控制类名的切换。当点击按钮时，会触发changeStyles方法，通过修改变量的值来改变类样式，从而实现了样式的动态切换。
谢谢款待
