时间戳

首页 > 解决方案 > 将项目映射到列表中

list - 将项目映射到列表中

问题描述

我有一个项目，使用 JavaScript/Vue，我通过映射每个项目来写出成分，并加入", ". 相反，我想把每个项目写成一个列表，但我不确定如何去做。我现在的代码如下所示：

<li>
  {{ order.ingredients.map(item=>item["ingredient_"+ lang]).join(", \n")}} 
</li>

有没有这样做的好方法？

标签： listdictionaryvue.jsvuejs2

解决方案

我不确定您的 HTML 结构是什么，但使用v-for 指令的一种方法是这样的。

const vue = new Vue({
  el: "#app",
  data() {
    return {
      order: {
        ingredients: ['orange', 'apple', 'pear', 'banana']
      }
    }
  }
})
ul {
  list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul v-for="(ingredient,index) in order.ingredients" :key="index">
    <li> {{ingredient}} </li>
  </ul>
</div>

推荐阅读