VUE教程（第六节）

上节说了生命周期，其实还是需要认真理解的，特别是做系统类网站的时候，因为涉及的数据交互比较多，而我们的vue是数据驱动类型的，对于之前一直使用jQuery开发的同学来说或许一下在没有适应呢，这是时候对于数据和dom的渲染顺序之类的，就需要理解比较深入；回顾完上节的内容，这一节我们来学习动态绑定class和style，学习好了这一节内容，对于样式的操作基本就哦了。

——》关于class的操作，我们有两种方式，第一种是对象绑定方法，第二种是数组绑定方法，我们先看代码：

class代码.png

class效果.png

对象绑定方法就是设定class=一个对象，然后对象属性名key就是class的名字，它的value就是布尔值true或者false，以此来设定是否添加这个class；

class代码1.png

class效果1.png

look，当我们设定都为true时候都会被添加进去；

我们再看看class用数组设定的效果：

class数组代码.png

class数组效果.png

有多个class，为了操作class名字可以设定一个参数，然后把参数作为数组的值参数class中，如果需要更改，只需要更改参数对象就行了，比如现在要把active的class名字改为activename，那只需要将dataclass1的设定值改为activename就可以了，超级方便的。

——》关于style的操作，关于style的操作和class的操作其实差不多，同样具有对象写法和数组写法，只是传值有点稍微的不同而已，我们来看看代码就知道咯：

style对象代码.png

style对象效果.png

这是对象的参数方式，我们设定style为一个对象，对象的key为具体的操作的style，比如说color、font-size之类的，然后value就是vue的data值，此值绑定了对应的参数，渲染后参数会替代vue的data值，然后把需要的属性渲染出来。

数组的方式如何传值呢，我们来看看吧：

style数组代码.png

style数组效果.png

把vue的data值设定一下，设定为一个对象哦，然后把data值作为参数写在style的数组里面，这种写法还是挺有意思的；

其实还有一种不算正统的方式，我个人用的比较多，就是直接拼接字符串，咦~~~不能小看这个哦，看看代码和实现效果吧：

style拼接字符串代码.png

style拼接字符串效果.png

这种方式官方没有提出来做，可能有其他的问题吧，不过暂时我是没有发现，所以有些操作我还是会这么干。

实战小技巧：

我们之前学习了v-bind和v-on这两个指令，一个是操作属性的，一个是操作事件函数的，他们都有简写方式，比如v-bind的简写就是一个冒号“：”，记住这是英文输入法下面的冒号哦，v-on的简写是“@”，其实我个人比较喜欢简写的方式，更少的代码，个人建议就是如果使用全写，那就通篇全写，如果使用简写，那就通篇简写，那样的不管值美观性还是可读性都是更优越的。

今天要学习的内容就这么多喜欢的朋友可以关注公众号，每周都有更新哦，期待与你一起成长！

公众号