在这个看颜值的时代，美，真的太重要了。为了方便CSS美好HTML的美，Vue3.0特意提供了操作元素的class和内联样式的指令。因为它们都是元素，所以我们可以用v-bind进行处理。
由于字符串拼接麻烦且易错，所有Vue3.0在v-bind用于class和 style时，做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。
6.1 Class指令
Vue用v-bind:class(简写为:class)指令，用于解决动态切换class的需求。如果你不清楚用在什么哪方面的需求，就想一下提示信息的应用，在错误发生时，用红色字体，否则用绿色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
}
.error {
color: red;
}
</style>
</head>
<body>
<span id="app">
<h1 class="b" :class="{ 'error': hasError }">老陈帅不？
如果你说不帅，我就用红色字体，亮瞎你的眼。</h1>
</span>
<script>
Vue.createApp({
data() {
return {
hasError: true
}
}
}).mount("#app")
</script>
</body>
</html>渲染结果(生成的代码)
<h1 class="b error">老陈帅不？ 如果你说不帅，我就用红色字体，亮瞎你的眼。</h1>输出结果
如果你想同时满足多个class，你可以用class的数组语法。这个语法，可读性更强一些。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
}
.big-text {
font-size: 60px;
}
.error {
color: red;
}
</style>
</head>
<body>
<span id="app">
<p class="b" :class="[fontSize, errorInfo]">
程序员<br/>
除了会编程之外，还会什么？<br/>
当然是敲代码了。
</p>
</span>
<script>
Vue.createApp({
data() {
return {
fontSize: 'big-text',
errorInfo: 'error'
}
}
}).mount("#app")
</script>
</body>
</html>渲染结果(生成的代码)
<span id="app"><p class="b big-text error"> 程序员<br>
除了会编程之外，还会什么？<br> 当然是敲代码了。 </p></span>输出结果
如果你纠结该用红色字体表明不帅，还是用蓝色字体表明帅的话，那你可以用三元表达式，根据条件切换列表中的class。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
font-size: 50px;
}
.yes {
color: #008CBA;
}
.no {
color: red;
}
</style>
</head>
<body>
<span id="app">
<p class="b" :class="[isCool ? 'yes' :'no']">
老陈帅不？帅的，蓝色字体代表我的心。
</p>
</span>
<script>
Vue.createApp({
data() {
return {
isCool: true
}
}
}).mount("#app")
</script>
</body>
</html>输出结果
6.2 内联样式
在HTML中，在元素上用style的话，结果是不可改变的，为此Vue3.0加上了:style指令。注意，你别看这个指令看起来十分直观，看着非常像CSS，但其实是一个 JavaScript 对象来的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 style指令</title>
<script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
程序员，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
textColor: '#008CBA',
fontSize: 50
}
}
}).mount("#app")
</script>
</body>
</html>输出结果
如果你觉得这种方式不好，伤了你的心，那你可以用样式对象的方式。这样的写法，是不是更舒服了一些，输出结果和上面是一模一样的。
<span id="app">
<p :style="styleOj">
程序员，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
styleOj: {
color: '#008CBA',
fontSize: '50px'
}
}
}
}).mount("#app")
</script>既然class可以用数组语法，:style当然也可以。:style的数组语法可以将多个样式对象应用到同一个元素上。输出结果和上面的还是一样的，我就不重复粘贴了。
<span id="app">
<p :style="[textColor, fontSize]">
程序员，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
textColor: {
color: '#008CBA',
},
fontSize: {
'font-size': '50px'
}
}
}
}).mount("#app")
</script>好了，有关Vue3.0样式绑定的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。我在分享Python，前端、Java和App方面的干货。关注我，没错的。