v-bind指令你会使用吗?

360 阅读1分钟

1.作用

动态地绑定一个或多个 attribute,如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令

  • 可以为元素的任意属性进行动态绑定
  • 只要属性的值是动态变化的,就应该使用v-bind
  • v-bind可以简写为 :

2.语法

<标签  v-bind:属性='值'></标签>,如<img v-bind:src="imgsrc"/> | <img :src="imgsrc"/>

3.使用

  1. 对象方式动态绑定样式
    • 可以根据指定的bool决定是否添加指定的样式
  2. 数组方式动态绑定样式
    • 可以同时绑定多个样式,也可以通过bool值决定是否添加指定的样式

image.png

4.细节

  • 绑定的值如果是变量得先定义好

  • 数组方式绑定样式的时候,也可以直接使用定义好的样式类名(记得使用引号包含)