Vue核心⑥(绑定样式)

Vue核心⑥(绑定样式)

文章目录

​​绑定class样式​​

​​通过字符串绑定​​​​通过数组绑定​​​​通过对象绑定​​

​​绑定style样式​​

​​通过对象绑定​​​​使用数组的方式绑定​​

绑定class样式

通过字符串绑定

现在有几组样式。 basic是基本样式必须有，happy、sad、normal这三组样式必选其一，add1、add2、add3这三组样式可以叠加，我们现在将他们添加到某一个元素身上。

按照我们以前的想法，肯定是直接操作DOM，先去获得元素，再去添加。但是使用了Vue我们可以利用数据绑定。如下：

我们把固定类型basic写死在class中，动态变化的类型使用v-bind进行数据绑定。

这种字符串写法，适用于：样式的类名不确定，需要动态指定的情况。

通过数组绑定

接下来我们提出另一个需求：我们可能随时需要 添加/去掉 绑定。

这种数组写法，适用于：要绑定的样式个数不确定，名字也不确定。

通过对象绑定

再来一个需求：我们已经确定可能使用两个样式。

这种对象写法适用于：要绑定的样式个数确定、名字也确定，但动态决定用不用。

绑定style样式

通过对象绑定

代码如下：

注意：对象的属性要与css中的属性相对应，带有横杠的命名方式改为驼峰命名法。

使用数组的方式绑定

数组里面装的是样式对象

样式对象的特点就是其中的属性名要与css中的样式相对应

例如：

总结：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。