Class 与 Style 绑定——Vue 学习笔记(五)

Class 绑定

(1)字符串方法绑定


(2)对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class:


同时,v-bind:class 指令也可以与普通的 class attribute 共存,例如:


绑定的数据对象不必内联定义在模板里:

效果和上面的例子一模一样。


我们也可以在这里绑定一个返回对象的计算属性

依旧可以正常运行。


(3)数组语法:

我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:

数组语法仍然可以与普通的 class attribute 共存。


在数组语法中也可以使用对象语法:

结果和上面的例子一模一样。


Style 绑定

(1)对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:


直接绑定到一个样式对象通常更好,这会让模板更清晰:

效果和上面的一样。


同样的,对象语法常常结合返回对象的计算属性使用。


(2)数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:


(3)多重值

从 2.3.0 起可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex

猜你喜欢

转载自blog.csdn.net/ySFRaabbcc/article/details/109636816
今日推荐