Question

我的Vue.js程序没有得到想要的输出。
任何人都可以查看代码并帮助我进行修改。

我的代码：

  data: {
    hotels: [
      {
        "name": "hotel A",
        "facilities": []
      },
      {
        "name": "hotel B",
        "facilities": [
          "restaurant",
          "lounge",
          "wi-fi"
        ]
      },
      {
        "name": "hotel C",
        "facilities": [
          "wi-fi"
        ]
      }
    ]
  }

<p v-for="hotel in hotels">
<span v-if="hotel.facilities.indexOf('restaurant') !== -1">{{ hotel.name }}/span>
<span v-if="hotel.facilities.indexOf('wi-fi') !== -1">{{ hotel.name }}</span>
</p>

当前输出：

<p><!----> <!----></p>
<p><span>hotel B</span> <span>hotel B</span></p>
<p><!----> <span>hotel C</span></p>

所需的输出：

<p>
<span>hotel B</span>
<span>hotel B</span>
<span>hotel C</span>
</p>

Answer 1

在您的代码中，v-for将针对阵列中每次出现的旅馆重复一次，是<p>的3倍

要只创建一次<p>，您应该将代码放入嵌套在<template>标记中的<p>标记中。

示例：

<p>
  <template v-for="hotel in hotels">
    <span v-if="hotel.facilities.indexOf('restaurant') !== -1">{{ hotel.name }}/span>
    <span v-if="hotel.facilities.indexOf('wi-fi') !== -1">{{ hotel.name }}</span>
  </template>
</p>

Answer 2

尝试一下：

<p>
  <span v-for="hotel in hotels">
    <template v-if="hotel.facilities.indexOf('restaurant') !== -1">{{ hotel.name }}/template >
    <template v-if="hotel.facilities.indexOf('wi-fi') !== -1">{{ hotel.name }}</template >
  </span>
</p>

如何编写Vue.js v-for

2 个答案: