Vue框架学习笔记——绑定class样式和绑定style样式

灰太狼 2024-02-17 11:19 82阅读 0赞

#### 文章目录 ####

*  前文提要
 *  class样式的三种绑定方法（图片来自参考链接）
 *  style样式（内联形式）
 *  总结

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

主要学习链接：[尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通][Vue2.0_Vue3.0_vuejs]

--------------------

## class样式的三种绑定方法（图片来自参考链接） ##

多数是使用的对象写法进行样式绑定，之所以写成这样都是为了方便使用，是经过筛选后的写法。

html代码：  
![在这里插入图片描述][9c1d5138d16c4c51a545d55d83112da5.png]  
data中的写法：  
![在这里插入图片描述][c5039d6a23ec45b99500f749167a18e9.png]  
样式对象，每个样式的属性都是存在的才能写。  
`:class`是`v-bind:class`的简写形式，将静态的属性变为动态的属性。

## style样式（内联形式） ##

html代码：  
![在这里插入图片描述][e768379bd1b2444e91dcc5ce7225788b.png]  
data中的写法：  
![在这里插入图片描述][54bb2a18309e4b478351434c5057df59.png]  
样式对象，每个样式的属性都是存在的才能写。  
`:style`是`v-bind:style`的简写形式，将静态的属性变为动态的属性。

## 总结 ##

![在这里插入图片描述][0c5d4bf8f0d8473985d5403e2a2089b8.png]

--------------------

至此，结束。

[Vue2.0_Vue3.0_vuejs]: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1
[9c1d5138d16c4c51a545d55d83112da5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/e3153dd9fe7543dfb1c0961cd41c8a3a.png
[c5039d6a23ec45b99500f749167a18e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/c803bb69e7b34e8990fecc1cb3456f21.png
[e768379bd1b2444e91dcc5ce7225788b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/46546fce26c04d70bc22b31c076c75e5.png
[54bb2a18309e4b478351434c5057df59.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/48101dc363e341af95eb64f9b701b973.png
[0c5d4bf8f0d8473985d5403e2a2089b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/0f113104e091412381039b0ab4c5d651.png