vue .map

作者：冥界少主发布日期:2025-07-26 浏览:37

// 示例代码：使用 Vue 和 .map 方法

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' }
    ]
  },
  computed: {
    // 使用 .map 方法创建一个新的数组，只包含名称
    itemNames() {
      return this.items.map(item => item.name);
    }
  }
});

// HTML 部分
<div id="app">
  <ul>
    <li v-for="name in itemNames" :key="name">{{ name }}</li>
  </ul>
</div>

// 解释说明：
// 在这个示例中，我们使用 Vue 实例的 computed 属性中的 .map 方法来遍历 items 数组，
// 并创建一个只包含名称的新数组 itemNames。然后在模板中使用 v-for 指令来渲染这些名称。

上一篇：vue query传参

下一篇：vue获取当前页面的url