现在我们已经介绍了向Vue组件动态添加类的基础知识。那么如何使用自己的自定义组件来做到这一点?
与自定义组件一起使用
假设我们在 app 中有一个自定义组件
1 2 3 4 5 6 |
|
如果我们要动态添加一个将更改主题的类,我们该怎么办?其实很简单。
我们只需要像以前那样添加:class
属性
1 2 3 4 5 6 7 |
|
之所以起作用,是因为Vue直接在MovieList
的根元素上设置类。
在组件上设置props
时,Vue会将这些props与组件在其props
部分中指定的props进行比较。 如果有匹配项,它将作为常规props传递。 否则,Vue会将其添加到根DOM元素中。
在这里,由于MovieList
没有指定class
属性,因此Vue知道应该在根元素上进行设置。
不过,我们可以用动态类名做一些更高级的事情。
快速生成类名
我们已经介绍了许多动态添加或删除类名的不同方法。但是动态生成类名本身又如何呢?
假设有一个Button
组件,它为所有不同类型的按钮提供20种不同的CSS样式。
你可能不想花一整天的时间把每一项都写出来,也不想把开关的逻辑都写出来。相反,我们将动态生成要应用的类的名称。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对Button
组件执行此操作,则可以执行以下简单操作:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
现在,使用Button
组件的任何人都可以将theme
属性设置为他们想要使用的任何主题。
如果没有设置任何类,它将添加.default
类。如果将其设置为primary
,则会添加.primary
类。
使用计算属性来简化类
最终,模板中的表达式将变得过于复杂,并将开始变得非常混乱和难以理解。幸运的是,我们有一个简单的解决方案,就是使用计算民属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
这不仅易于阅读,而且还可以轻松添加新功能并在将来进行重构。
英文原文地址:https://forum.vuejs.org/t/add-a-dynamically-generated-class-name-to-components-class-attribute-from-mixin/27626
为了保证的可读性,本文采用意译而非直译。
相关推荐:
2020年前端vue面试题大汇总(附答案)
vue教程推荐:2020最新的5个vue.js视频教程精选
更多编程相关知识,请访问:编程教学!!
以上就是详解Vue中动态添加类名的方法的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者