博客

vue遍历json

  • Post category:other

以下是关于“Vue遍历JSON”的完整攻略：

步骤1：使用v-for指令

在Vue中，可以使用v-for指令遍历JSON数据。以下一个例代码，演示如何使用v-for指令遍历JSON数据：

<ul>
  <li v-for="(item, index) in items :key="index">
    {{ item.name }}
  </li>
</ul>

在上面的代码中，使用了v-for指令遍历items数组中的每个元素，并使用{{ item.name }}显示每个元素的名称。

步骤2：使用computed属性

除了v-for指令，还可以使用computed属性遍历JSON数据。以下是一个例代码，演示如何使用computed属性遍历JSON数据：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ getItemName(item) }}
  </li>
ul>

在上面的代码中，使用了computed属性getItemName遍历items数组中的每个元素，并返回每个元素的名称。

computed: {
  getItemName: function() {
    return function(item) {
      return item.name;
    }
  }
}

示例1：使用v-for指令遍历JSON数组

以下是一个示例代码，演示如何使用v-for指令遍历JSON数组：

<ul>
  < v-for="(item, index) in items" :key="index">
    {{ item.name }}
  </li>
</ul>

在上面的代码中，我们使用了v-for指令遍历items数组中的每个元素，并{{ item.name }}显示每个元素的名称。

示例2：使用computed属性遍历JSON数组

以下是一个示例代码，演示如何使用computed属性遍历JSON数组：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ getItem(item) }}
  </li>
</ul>

在上面的代码中，我们使用了computed属性getItemName遍历items数组中的每个元素，并返回每个元素的名称。

computed: {
  getItemName: function() {
    return function(item) {
      return item.name;
    }
  }
}

总结：

  • 可以使用v-for指令遍历JSON数据。
  • 可以使用computed属性遍历JSON数据。
  • 遍历JSON数据时，可以根据需要显示JSON数据中的不同属性。
Tags: