Vue.js Vue js如何在v-for循环中渲染花括号变量

在我的数据对象中

items: [
        { name: "Breakfast", comp: "breakfastItems" },
        { name: "Lunch", comp: "lunchItems" },
        { name: "Dinner", comp: "dinnerItems" },
        { name: "Dessert", comp: "desertItems" }
      ]

其中comp是一个计算属性。 在我的组件模板中，我想使用for循环实现类似的功能

<span v-for="n in items">
{{n.comp}}
</span>

{{n.comp}}

---

这不起作用，因为我需要在渲染时添加{{}。如何执行此操作？

要通过动态插值在模板内绑定计算属性，可以使用变量

假设您列出的

comp

属性是下面的集合，则模板可能如下所示：

<span v-for="n in items">
    <span v-for="m in $root[n.comp]">{{ m }}</span>
</span>

{{m}}

---

你需要这样的鞋吗

{{{'+n.comp+'}}

只有当计算的属性都在根元素中时，这才有效。