vue json

作者：暗夜幽殤发布日期:2025-04-22 浏览:65

// Vue 组件中使用 JSON 示例

<template>
  <div>
    <!-- 使用 v-for 指令遍历 JSON 数据 -->
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个 JSON 格式的数组
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Charlie', age: 35 }
      ]
    };
  }
};
</script>

<!-- 解释说明：
1. 在模板部分，使用了 v-for 指令来遍历 items 数组，并将每个对象的 name 和 age 属性显示在列表项中。
2. 在 script 部分，定义了一个包含多个对象的 JSON 数组 items，并将其作为组件的数据属性返回。
3. :key 是 Vue 的一个特殊属性，用于为每个列表项提供一个唯一的标识符，以提高渲染性能。 -->

上一篇：vue快速入门

下一篇：vue刷新页面的方法