12-27 vue里的class与style绑定

最新推荐文章于 2025-10-12 22:42:15 发布

原创最新推荐文章于 2025-10-12 22:42:15 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue中动态绑定class的方法，包括如何使用三元表达式和布尔值进行条件绑定，以及如何同时绑定数组和对象。此外，还探讨了通过DOM获取元素宽高的几种方式，解释了scrollWidth、clientWidth与offsetWidth的区别。

销户系统的开发

1.关于Class 与 Style 绑定

vue里已经有成熟的解决办法，

:class="{
      [client]: true,
      canRollback: canRollback()
    }"

上述代码的意思是，绑定class为【client】的值，以及根据canRollback()的返回布尔值来判断是否添加canRollback类
值得注意的是，一个元素里动态绑定class只能在一个语句里，不然会报重复绑定class的错。所以要像数组和对象绑定方法写在一起，必须外面套一个对象

2.关于用js获取元素的宽高，不管是vue还是js 通过DOM获取到元素，元素默认自带以下属性

scrollWidth,clientWidth,offsetWidth的区别