Vue 3.0从入门到实战PPT1第4章ppt

第4章 Class与Style绑定目录0102034.1绑定HTML Class4.2绑定内联样式4.3本章小结4.1.1对象语法4.1.2数组语法4.1绑定HTML ClassPART ONE通过传给v-bind:class一个对象，用于动态地切换class，可以将v-bind:class简写为:class。Vue也支持在对象中传入更多字段来动态切换多个class。:class指令也可以与普通的class attribute同时存在，如例4-1所示。4.1.1对象语法例4-2 通过计算属性切换class4.1.1对象语法上面的语法表示active这个class的存在与否取决于isActive的真假，text-danger的存在与否取决于hasError的真假。当isActive或者hasError变化时，class的值也将相应地更新。上面代码的渲染结果为：当变量值为undefined、null、值为0的数字、空字符串时，会被判定为假。、-1、-0.1 也会被判定为真。除了这种形式，也可以直接绑定一个Object数据或绑定一个返回对象的计算属性。一般当条件多于两个时，往往会使用计算属性，是一种很便利和常见的用法，如例4-2所示。例4-2 通过计算属性切换class4.1.2数组语法与对象语法类似，可以把一个数组传给:class，用来应用一个class列表。想根据条件切换列表中的class，也可以使用三元表达式。当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法。在例4-3中分别使用了普通数组、三元表达式与对象语法。例4-3 通过计算属性切换class上面代码的渲染结果为：与对象语法一样，数组语法也可以使用data、computed 和methods三种方法。在开发过程中，如果表达式较长或逻辑复杂，应该尽可能优先使用计算属性给元素动态设置类名。4.2.1对象语法 4.2.2数组语法4.2绑定内联样式PART TWO使用v-bind:style可以给元素绑定内联样式，方法与:class 类似，也有对象语法和数组语法，类似直接在元素上写CSS，同样可以简写为:style。:style的语法十分直观，十分接近CSS，但其实是一个JavaScript对象。其中CSS property名可以用驼峰式(camelCase)或短横线分隔(kebab-case)来命名。由于直接绑定到一个样式对象会让模板更清晰，因此通常使用对象的方式。同样的，对象语法也常常结合返回对象的计算属性使用。在例4-4中分别使用了两种绑定方式，结果如图4-1所示。4.2.1对象语法例4-4 对象绑定样式图4-1 对象绑定样式结果:style的数组语法可以将多个样式对象应用到同一个元素上，如下所示。在实际开发中，:style的数组语法并不常用，因为往往可以写在一个对象里面，这样对代码的理解更为直观。较为常用的是计算属性。在:style中使用特殊的CSS property时，例如transform，Vue将自动添加相应的前缀。4.2.2数组语法本章介绍了Class与Style绑定，包括绑定HTML Class与绑定内联样式。分别可以通过对象语法和数组语法实现对class与style的动态切换。对象语法与数组语法一样，都可以使用data、computed 和methods三种方法，其中最为常用与便捷的是计算属性。通过为表达式结果的类型增加对象与数组，避免了将v-bind用于class和style时表达式字符串拼接麻烦且易错的问题。在下一章中，将会进一步介绍过滤器。4.3本章小结