vue如何动态添加属性,vue给对象动态添加属性和值的实例
本文主要介绍如何在Vue中动态添加类名。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
静态和动态类的条件类名使用数组语法，自定义组件使用对象语法，快速生成类名，使用计算属性简化类，能够给组件添加动态类名是非常强大的功能。它使我们更容易编写定制主题，根据组件的状态添加类，以及编写样式相关组件的不同变体。
添加动态类名就像在组件中添加class name 一样简单。无论classname的评估结果是什么，它都将是添加到组件中的类名。
当然，我们可以为Vue中的动态类做很多事情。在这篇文章中，我们将讨论许多事情：
在Vue中使用静态和动态类如何使用正则JS表达式计算我们的类的动态类名的数组语法对象语法快速生成类名如何在自定义组件上使用动态类名
静态和动态类
在Vue中，我们可以向组件添加静态和动态类。
静态类是那些永远不会改变的枯燥类，它们永远会出现在组件中。另一方面，我们可以在应用程序中添加和删除动态类。
添加静态类与在常规HTML中完全一样。
模板
描述
这就是在Vue中添加静态类的方法。
/span
/模板
类在动态方面非常相似，但是我们必须使用Vue的特殊属性语法v-bind，以便将JS表达式绑定到我们的类：
模板
span v-bind:class=description
这就是在Vue中添加静态类的方法。
/span
/模板
您会注意到，我们必须在动态类名周围添加额外的引号。
这是因为v-bind语法接受我们作为JS值传递的任何内容。添加引号可以确保Vue将其视为一个字符串。
Vue也有一个v-bind的简写语法：
模板
span :class=描述
这就是在Vue中添加静态类的方法。
/span
/模板
真正令人惊奇的是，您甚至可以在同一个组件上同时拥有静态和动态类。静态类用于我们知道不会改变的东西，比如定位和布局，动态类用于主题之类的东西：
模板
跨度
class=描述
:class=theme
这就是在Vue中添加静态类的方法。
/span
/模板
导出默认值{
data() {
返回{
主题：“蓝色主题”，
};
}
};
-。蓝色主题{
颜色：藏青色；
背景：白色；
}
在这个例子中，theme是一个变量，它包含了我们将要应用的类名。
有条件的类名
由于v-bind可以接受任何JS表达式，我们可以用它做一些非常酷的事情。我最喜欢的是模板中三元表达式的使用，往往非常干净易读。
模板
跨度
class=描述
:class=darkMode？“黑暗主题”:“光明主题”
这就是在Vue中添加动态类的方法。
/span
/模板
如果darkMode为真，则使用dark-theme作为我们的类名。否则，我们选择轻主题。
使用数组语法
如果需要动态添加许多不同的类，可以使用数组或对象。这两种方法都很有用。我们先来看数组方法。
因为我们只是在计算一个JS表达式，所以可以把刚刚学过的表达式和数组语法结合起来。
模板
跨度
class=描述
:class=[
fontTheme，
黑暗模式？“黑暗主题”:“光明主题”，
]
这就是在Vue中添加动态类的方法。
/span
/模板
我们使用一个数组在这个元素上设置两个动态类名。fontTheme的值是一个类名，它将改变字体的外观。在前面的例子中，我们仍然可以使用darkMode变量在深色主题和浅色主题之间切换。
使用对象语法
我们甚至可以使用对象来定义动态类的列表，这给了我们更多的灵活性。
对于任何值为true的键/值对，它将使用键作为类名。让我们看一个对象语法的例子：
模板
跨度
class=描述
:class={
黑暗主题:黑暗模式，
“灯光主题”:黑暗模式，
]
这就是在Vue中添加动态类的方法。
/span
/模板
我们的对象包含两个键：暗主题和亮主题。类似于我们前面实现的逻辑，我们希望根据darkMode的值在这些主题之间切换。
当darkMode为真时，dark-theme将作为动态类名应用于我们的元素。但是光-他们不会被应用，因为！DarkMode值为假。
现在我们已经介绍了向Vue组件动态添加类的基础知识。那么如何使用自己的定制组件来实现这一点呢？
与自定义组件一起使用
假设我们在应用程序中有一个自定义组件。
模板
电影列表
:电影=电影
:流派=流派
/
/模板
如果要动态添加一个会改变主题的类，应该怎么做？其实很简单。
我们只需要像以前一样添加：class属性。
模板
电影列表
:电影=电影
:流派=流派
:class=darkMode？“黑暗主题”:“光明主题”
/
/模板
它之所以有效，是因为Vue直接在MovieList的根元素上设置类。
在组件上设置属性时，Vue会将这些属性与组件在其属性部分中指定的属性进行比较。如果有匹配，会作为常规道具传过去。否则，Vue会将其添加到根DOM元素中。
这里，因为MovieList没有指定class属性，所以Vue知道应该在根元素上设置它。
然而，我们可以用动态类名做一些更高级的事情。
快速生成类名
我们已经介绍了许多动态添加或删除类名的不同方法。但是动态生成类名本身呢？
假设有一个按钮组件，它为所有不同类型的按钮提供了20种不同的CSS样式。
你可能不想花一整天的时间写出所有的东西，也不想写出开关的逻辑。相反，我们将动态生成要应用的类的名称。
模板
跨度
class=描述
:class=theme
这就是在Vue中添加静态类的方法。
/span
/模板
导出默认值{
data() {
返回{
主题：“蓝色主题”，
};
}
};蓝色主题{
颜色：藏青色；
背景：白色；
}
我们可以设置一个变量来包含我们想要的任何类名的字符串。如果我们想对按钮组件这样做，我们可以做以下简单的操作：
模板
按钮
@click=$emit(click )
按钮
:class=theme
{{ text }}
/按钮
/模板
导出默认值{
道具：{
主题：{
类型：字符串，
默认：“默认”，
}
}
};默认{}。主要{}。危险{}
现在，任何使用Button组件的人都可以将theme属性设置为他们想要使用的任何主题。
如果没有设置类，它将添加。默认类别。如果将其设置为primary。将添加主要类别。
使用计算属性来简化类
最终，模板中的表达式会变得过于复杂，开始变得非常混乱和难以理解。幸运的是，我们有一个简单的解决方案，就是利用计算人的属性：
模板
电影列表
:电影=电影
:流派=流派
:class=class
/
/模板
导出默认值{
计算值：{
class() {
返回darkMode？“黑暗主题”:“光明主题”；
}
}
};
这不仅易于阅读，而且便于将来添加新功能和重构。
关于如何在Vue中动态添加类名的文章到此结束。关于在Vue中动态添加类名的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。