Vue.js样式绑定

布满荆棘的人生 2022-05-10 06:34 341阅读 0赞

样式绑定

class和style时html元素的属性，可以使用v-bind来进行样式的yi绑定，以设置样式。

v-bind在绑定class和style时，Vue专门增强了它。结果类型不仅可以时字符串，还可以是对象和数组。

class属性绑定

1：基本使用：



以上可以根据isACtive的值，动态判断来进行class样式的绑定。

提示：为了避免不必要的问题，data中和style中的class，最好不要用中划线。

2：也可以绑定多个



这里，会把v-bind动态绑定的class合并到前面的class中。

3：使用对象



这里，v-bind中直接使用对象进行绑定。与前面不同的时，对象中的键应该和style中定义的class样式名对应。虽然可以使用中划线，用引号括起来。但是同样不建议。

其实很好理解，把v-bind中的对象直接替换为{class1:true,class2_abc:true}，这和前面两个是相同的。

4：使用数组



这里，v-bid中使用数组进行绑定。可以理解为将data中的属性值替换到了class中。

5：使用计算属性

这是强大且常用的方式。



用法就是这样，可以借助计算属性做一些复杂的逻辑判断等等。

style属性绑定

1：直接设置样式：



vue学习

发表评论

表情：
评论列表 （有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue绑定样式

    3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

    灰太狼灰太狼/ 0 赞/ 84 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 456 阅读