我们知道，CSS有两种形式可以改变样式，一种是行内样式，用关键字style表示，一种是Class选择器，使用class绑定外部样式。
那么Vue既然作为一种动态语言，是否能动态改变CSS的样式呢? 其实这方面Vue做了充分的支持，既可以动态改变Style样式，也可以动态换绑Class。
动态Style样式
方式1： 我们用 :style 来表示这是受Vue管理的样式 ，样式的内容在Data中使用字符串的形式定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :style="styleString">内容</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
styleString: 'color: red'
}
},
template: '#template'
}
).mount('#root')
</script>
</html>运行上面的例子，我们发现文字变成了红色。
方式2: 我们还可用:style绑定Object类型的Data数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :style="styleObj">内容</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
styleObj: {
color: 'red',
background: 'yellow'
}
}
},
template: '#template'
}
).mount('#root')
</script>
</html>运行上面的例子，我们发现文字变成了红色，背景变成了黄色。
方式三: :style中还可以用数组引用多个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :style="[baseStyle, baseStyle]">内容aa</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
baseStyle: {
fontSize: '20px',
color: 'red'
},
activeStyle: {
backgroundColor: '#eee',
padding: '10px'
}
}
},
template: '#template'
}
).mount('#root')
</script>
</html>在上面的数组style中我们引用了两个Object的样式。当然，数组内的元素替换成string类型的元素也是可以的，:style的数组形式其实就是前两种的超集。
动态绑定Class
同样的逻辑我们也可以用:class改变元素的样式，对应着动态style方式，:class也有三种写法。 不过这些样式应该在<style>标签内事先定义好，同时配合Data属性才能做到动态绑定class
方式1: 使用:class绑定字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
<style>
.colorRed {
color: red
}
</style>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :class="colorRed">内容aa</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
colorRed: 'colorRed'
}
},
template: '#template'
}
).mount('#root')
</script>
</html>方式2: :class还可以绑定Object类型的Data数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
<style>
.colorRed {
color: red;
}
.backgroundYellow {
background: yellow;
}
</style>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :class="classObj">内容aa</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
classObj: {colorRed: true, backgroundYellow: true}
}
},
template: '#template'
}
).mount('#root')
</script>
</html>这里的属性key对应着style标签中的选择器的名字，值是一个布尔值，当true的时候表示此条样式生效
方式3: :class 还可以绑定数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态Sytle</title>
<script src="https://unpkg.com/vue@3.5.17/dist/vue.global.js"></script>
<style>
.colorRed {
color: red;
}
.backgroundYellow {
background: yellow;
}
.fontWeight {
font-size: 30px;
}
</style>
</head>
<body>
<div id="root"></div>
<template id="template">
<div :class="[classObj, fontWeightObj]">内容aa</div>
</template>
</body>
<script>
Vue.createApp(
{
data() {
return {
classObj: {colorRed: true, backgroundYellow: false},
fontWeightObj: 'fontWeight'
}
},
template: '#template'
}
).mount('#root')
</script>
</html>