动态绑定class_vbind动态绑定属性以及style样式

hi~~时隔两三天不见，又回来了。说一下最近要忙的事情吧，第一件事是不久前“作死”报考了教资，还是一下子全报完的那种。还有一个多月就要考试了，要在这一个多月里面复习三科，想想就很难。当事人表示当时肯定是脑子抽了！！

后悔也没办法了，毕竟已经报名成功了，只能利用好假期的时间好好复习了。所以假期应该主要是把精力放在考教资上了。此外，第二件事就是兼职，估计会占用三分之一的假期时间；第三件事是复习上个学期的知识点，同时预习下学期的部分课程。理想中的安排是如上所示的，但实际贯彻起来就有点难了，为什么呢？说到底还是因为“懒”这一拦路虎。不说那么多了，接着整理v-bind动态绑定的相关知识。

前面我们学习的指令主要主要是将值插入到我们的模板内容当中。但是，除了内容需要动态来决定外，某些属性也可以实现动态绑定的效果。

比如动态绑定a元素的href属性

比如动态绑定img标签的src属性等

这个时候我们就可以使用v-bind指令，它主要是用于绑定一个或者多个属性值，或者向另一个组件传递props值。即动态绑定属性。以下将通过一个简单的例子来说明v-bind的基本使用。

0 1

v-bind的基本使用：

效果图：

需要注意的地方：

和v-on一样，也有语法糖语法：以下两个写法效果一样

  百度一下 (语法糖)

 百度一下0 2

v-bind动态绑定class有两种方式：

(1)对象语法

对象语法的含义是指class后面跟着的是一个对象，对象语法有下面这些用法。

用法一：直接通过{}绑定一个类

用法二：可以通过判断传入多个值

用法三：和普通的类同时存在，并不冲突

用法四：如果过于复杂，可以放在一个methods或者computed中。

效果图：点击换色时，上方字体会切换颜色

对象语法的小结：

(2)数组语法

数组语法是：class后面跟的是一个数组。

效果图：

0 3

与v-bind动态绑定属性一样，v-bind绑定样式style也有两种方式，分别为对象语法、数组语法。

(1)对象语法

style后面跟的是一个对象类型，

对象的key是css属性名称；

对象的value是具体赋的值，值可以来自于data中的属性

对应例子：

效果图：

           

(未点击)                    (点击后)

(2)数组语法：

style后面跟的是一个数组类型，多个值以“,”分割即可

效果图：

   

(未点击)                    (点击后)

好啦，今日份就是上面这些内容啦。早点休息伐，晚安

END 扫码关注我伐文字：yxm

排版：yxm

部分素材来源于网络，侵立删