Vue3 _ 9. Vue Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。好比我们现在让一段文字，在点击某个 button 的时候进行变换颜色，这个时候，我们通过 vue 直接处理它，来学习一下。

一、绑定 HTML Class

绑定 class 之前，我们先弄几个内部样式表。

有了这个之后，我们来写一个例子，就是来让一个 div 模块绑定 defaultCss 这个样式表。

我们 :class 其实写全了是 v-bind:class="......" 这样的，但是这个 v-bind 可以简写，这个前面说过要知道。

我们要绑定的 css 要用 {} 括起来，然后里面写我们要使用的 css，冒号左边的是 css 的名称，右面的是显示不显示，我们只需要给 canShow1 做绑定就好，true 就是显示，false 就是不显示。

当然，我们的 :class 还可以和普通的 class 公用，我们来看一下。

可以看到，我们除去边框变成红色，文字也变红色了。

除去这样的混用，我们还可以多次绑定多个样式，只需要使用逗号隔开即可。来看一下

除去上面的指定 css 绑定，我们还可以绑定一个 css 对象，同样可以实现，来看案例。

这样我们就可以直接修改 stylesheet 的属性，通过改变 stylesheet 的属性来改变 样式显示。

当然，Vue 不止可以直接绑定 data 中的变量，还可以直接绑定一个计算属性。来看一下。

可以看到，我们通过绑定计算属性，同样可以实现样式的变更。

二、绑定内联样式

这个其实也是我们以后常用的一个方法，因为有的时候 css 是引用其他的 UI 框架，出于无奈，我们需要自己进行简单的改造 css，以达到我们想要的效果，用法其实和 :class 相同，来看一下。

可以看到，字变成绿色了。当然，这个也可以支持多个内联样式，只需要我们用逗号隔开每一个样式即可。

这里主要注意一下，我们之前写的应该是 font-size，但是可以看到现在用的是 fontSize，这个是一个改动的点~~

除去类似上面这样直接绑定 '36px'，我们还可以只绑定 36，这个我们来看一下官网。

详细的大家可以参考官网的介绍，这里就不多说了。

这一篇东西不多，大家仔细理解一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~~