vue教程自学笔记(三)

五、Class与Style绑定

可以用v-bind用于class和style,表达式结果类型除了字符串,还可以是对象或数组。

1.绑定HTML Class

  • 对象语法:给v-bind:class传递一个对象,以便动态切换class:
<div v-bind:class="{ active: isActive }"></div>

  表示active这个class存在与否取决于数字属性isActive的truthiness。

  可以在对象中传入多个多个属性来动态切换多个class,也可以与普通的class共存。

  绑定的数据对象不必内敛定义在模板里。

  也可以绑定一个返回对象的计算属性。

  • 数组语法:把一个数组传递给v-bind:class,以应用一个class列表。

  如果也想根据条件切换列表里的class,可以用三元表达式。

  当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法。

  • 用在组件上

  当在一个自定义组件上使用class属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

2.绑定内联样式

  • 对象语法:v-bind:style数组语法
  • 数组语法
  • 自动添加前缀
  • 多重值

猜你喜欢

转载自www.cnblogs.com/Fourteen-Y/p/9036809.html