Vue中如何动态添加类名

作者：MichaelThiessen译者：前端小智来源：forum.vuejs.org/点赞再看，养成习惯GitHubhttps://github.com/qq44924588……已经收录在网站上，也整理了更多往期好评文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。能够为组件添加动态类名是一个非常强大的特性。它使我们能够更轻松地编写自定义主题、添加基于组件状态的类，以及编写依赖于样式的不同组件变体。添加动态类名就像向组件添加prop:class="classname"一样简单。无论类名的计算结果是什么，都将是添加到组件的类名。当然，我们可以在Vue中使用动态类做更多的事情。在本文中，我们将讨论很多内容：在Vue中使用静态和动态类如何使用正则JS表达式来评估我们的类动态类名的数组语法快速生成类名的对象语法如何在自定义组件上使用动态类命名静态类和动态类在Vue中，我们可以给组件添加静态类和动态类。静态类是那些永远不会改变的无聊类，它们将始终存在于组件中。另一方面，我们可以在应用程序中添加和删除动态类。添加静态类与在常规HTML中所做的完全相同动态类非常相似，但是我们必须使用Vue的特殊属性语法v-bind才能将JS表达式绑定到我们的类：在这里你会注意到我们必须在动态类名周围添加额外的引号。这是因为v-bind语法接受我们作为JS值传递的任何内容。添加引号可确保Vue将其视为字符串。Vue也有一个v-bind的简写语法：真正令人惊奇的是，您甚至可以在同一个组件上同时拥有静态类和动态类。静态类用于我们知道不会改变的东西，比如定位和布局，动态类用于主题之类的东西：exportdefault{data(){return{theme:'blue-theme',};}};----------------------------------------.blue-theme{颜色：海军;background:white;}在此示例中，theme是包含变量名称的类。条件类名由于v-bind可以接受任何JS表达式，我们可以用它做一些非常酷的事情。我最喜欢的是在模板中使用三元表达式，它往往非常干净和可读。如果darkMode为真，则使用dark-theme作为我们的类名。否则，我们选择浅色主题。使用数组语法如果需要动态添加许多不同的类，可以使用数组或对象。两种方法都有用，先看数组方法。由于我们只是评估一个JS表达式，我们可以将我们刚刚学到的表达式与数组语法结合起来我们使用数组在这个元素上设置两个动态类名。fontTheme的值是一个类名，它将改变字体的外观。在前面的示例中，我们仍然可以使用darkMode变量在深色主题和浅色主题之间切换。使用对象语法，我们甚至可以使用对象来定义动态类列表，这给了我们更大的灵活性。对于值为true的任何键/值对，它将使用键作为类名。让我们看一个对象语法的例子：我们的对象包含两个键：dark-theme和light-theme。与我们之前实现的逻辑类似，我们希望根据darkMode的值在这些主题之间进行切换。当darkMode为true时，将dark-theme作为动态类名应用于我们的元素。但是light-them不会被应用，因为!darkMode是false。我们现在已经介绍了动态添加类到Vue组件的基础知识。那么我怎样才能用我自己的自定义组件来做到这一点呢？使用自定义组件假设我们在应用程序中有一个自定义组件如果我们想动态添加一个将改变主题的类，什么我们应该做什么？这实际上很容易。我们只需要像以前一样添加：类属性之所以有效，是因为Vue直接在MovieList的根元素上设置类。在组件上设置props时，Vue会将这些props与组件在其props部分中指定的props进行比较。如果匹配，它将作为常规道具传递。否则，Vue会将其添加到根DOM元素。在这里，由于MovieList没有指定类属性，Vue知道它应该在根元素上设置。然而，我们可以用动态类名做一些更高级的事情。快速生成类名我们已经介绍了多种动态添加或删除类名的不同方法。但是自己动态生成类名呢？假设有一个Button组件，它为所有不同类型的按钮提供20种不同的CSS样式。您可能不想花一整天的时间写出每个项目或开关的逻辑。相反，我们将动态生成要应用的类的名称。exportdefault{data(){return{theme:'blue-theme',};}};.blue-theme{颜色：海军;background:white;}我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想为Button组件做这个，我们可以做一些简单的事情：exportdefault{props:{theme:{type:String,default:'default',}}};.default{}.primary{}.danger{}现在，使用按钮组件任何人都可以将theme属性设置为他们想要使用的任何主题。如果没有设置类，它将添加.default类。如果设置为primary，将添加.primary类。使用计算属性来简化类最终，模板中的表达式将变得过于复杂，并开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，使用计算属性：exportdefault{computed:{class(){返回黑暗模式？'黑暗主题'：'浅色主题';}}};这不仅易于阅读，而且还便于将来添加新功能和重构。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://forum.vuejs.org/t/add...干货交流系列文章总结如下。我觉得订个Star挺好的。欢迎加群，互相学习。https://github.com/qq44924588...我是小智，公众号《大招天下》的作者，前端技术爱好者。我会经常分享自己学习看到的干货，在进步的路上互相鼓励！关注公众号，后台回复福利，就能看到福利，你懂的。