v-bind

作者: 封燐 | 来源:发表于2019-08-06 03:56 被阅读0次

    DOM 元素经常会动态地绑定一些属性值,当数据变化时,就会重新渲染。
    最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定。

    绑定 class

    对象语法

    当需要动态切换 class 时,可以给 class 绑定一个对象,对象的键是类名,值是布尔值
    当 class 的表达式过长或者逻辑复杂时,还可以绑定一个计算属性。

    数组语法

    当需要应用多个 class 时,可以给 class 绑定一个数组,数组成员就是类名
    对象和数组可以混用。

    绑定内联样式 style

    css 属性名称使用驼峰命名( camelCase )或短横分隔命名( kebab-case )
    Vue 会自动给特殊的 css 属性名称增加前缀,比如 transform 等 CSS3 中的属性。

    对象语法

    很像直接在元素上写 CSS。
    常用计算属性。

    数组语法

    应用多个样式对象时,可以使用数组语法,在实际业务中并不常用。

    相关文章

      网友评论

          本文标题:v-bind

          本文链接:https://www.haomeiwen.com/subject/iqsvdctx.html