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。
常用计算属性。

数组语法

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

相关文章

  • 2018-09-16练习与复习

    v-bind绑定属性; v-bind:“属性名”v-bind:的简写(:)列 v-bind小项目 v-on:绑定事...

  • Vue.js 笔记

    v-bind:绑定属性 v-bind绑定属性,v-bind:属性名=‘值’,v-bind :属性名=‘值’ v-m...

  • vue03

    v-bind动态绑定class(对象语法) v-bind动态绑定class(数组语法) v-bind动态绑定sty...

  • 与Vue.js的第三天

    今天学习了v-bind,v-show,v-if,v-else,v-else-if v-bind v-bind是绑定...

  • v-bind绑定属性

    //v-bind是用来绑定属性的 v-bind:src(任何属性)=“”

  • vue中的指令

    v-bind: v-bind动态绑定指令,官方文档是这样来说的: 1.:v-bind动态绑定指令,默认情况下标签自...

  • v-bind以及class和style的绑定

    v-bind的作用,并分别写出v-bind的变量语法,数组语法,对象语法 作用:v-bind通常用来绑定属性的,动...

  • Vue的常用指令

    v-bind: 用于绑定属性,通过v-bind:绑定过的属性,可以在属性值可以写表达式v-bind:可以用**: ...

  • 第4课:v-bind以及class与style的绑定

    1.写出本课中v-bind的作用,并分别写出v-bind的变量语法,数组语法,对象语法 作用:v-bind通常用来...

  • 2018-09-14 vue常用指令

    v-bind v-bind 特性被称为指令,v-bind是绑定属性的,如下边的例子:点击切换图片 其中用v-bin...

网友评论

      本文标题:v-bind

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