我需要根据类别向元素添加类。这是我的示例数据:
data() {
return {
projects: [
{
title: 'Project 1',
categories: [{ name: 'featured' }, { name: 'category-1' }],
},
{
title: 'Project 2',
categories: [{ name: 'category-2' }],
},
],
};
},
我需要的是直接将类别作为类添加到包装器 div 上(使用 v-for),这将呈现:
<div class="featured category-1">
<h3>Project 1</h3>
</div>
<div class="category-2">
<h3>Project 1</h3>
</div>
我不知道该怎么做?
<div v-for="(project, index) in projects" :class="v-for="(category, index) in project.categories???">
{{project.title}}
</div>
我应该采取不同的做法吗?我似乎无法弄清楚。感谢您的帮助!
最佳答案
很简单:
<div v-for="project in projects" :class="classExtraction(project)">
<h3>
{{project.title}}
</h3>
</div>
您需要一种从项目类别中提取类的方法:
methods: {
classExtraction(item) {
return item.categories.map(cat => cat.name);
}
}
http://jsfiddle.net/eywraw8t/371192/
此外,请注意您应该使用 :key
指令和 v-for
将其绑定(bind)到唯一属性,最好是对象的 id
:
https://v2.vuejs.org/v2/style-guide/#Keyed-v-for-essential
关于vue.js - vue : add multiple classes inside a v-for, 基于数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52363334/