如何在Vue.js中顯示包含其他物件的物件

我是使用 Vue.js 的新手，我想知道如何顯示這個 JSON 物件：

{
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
}

在具有此結構的串列中：

<div>
<h1>The key of the object...</h1>
  <ul>
    <li>The list of all the strings inside the array</li>
  </ul>
</div>

uj5u.com熱心網友回復：

試試下面的方法

var app = new Vue({
 el: '#app',
 data() {
  return {
   obj:{
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
   }
  };
 },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Iterating the list</h1>
  <ul v-for="(item, attr) in obj" :key="attr"> Item {{attr}}
   <li v-for="(val, index) in item" :key="index">{{val}}</li>
  </ul>
</div>

uj5u.com熱心網友回復：

在 vue 模板中，您可以遍歷一個物件：

<template>
  <div>
    <div v-for="(value, key) in yourObject" :key="key">
      <h1>{{ key }}</h1>
      <ul>
        <li v-for="item in value" :key="'sub'   item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'myComponent',
  data() {
    return {
      yourObject: {
        "1": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ],
        "2": [
          "15-16",
          "16-17",
          "17-18",
          "18-19"
        ]
      }
    }
  }
}
</script>
<style>
</style>

• 你不能在一個組件中回圈你的根標簽，所以我把我的回圈放在一個div.
• 當您想在模板中回圈時，請記住添加鍵。鍵必須具有唯一值。

uj5u.com熱心網友回復：

最簡單的方法是使用v-for. 它與for-loop其他編程語言中的 a 相關。

此代碼的語法如下所示：

<div v-for="item in json" :key="item"></div>

根據您要顯示的內容 asingle v-for或nested v-for.

注意：json為了更好地理解，我已經命名了您的 json 。

一個 V 型回圈：

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    {{firstLoop}}
  </div>
</template>

輸出： {“1”：[“15-16”，“16-17”，“17-18”，“18-19”]，“2”：[“15-16”，“16-17”， "17-18", "18-19" ] }

兩個 V 型回圈：

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      {{secondLoop}}
    </div>
  </div>
</template>

輸出： [“15-16”、“16-17”、“17-18”、“18-19”] [“15-16”、“16-17”、“17-18”、“18-19” "]

三個 V-FOR 回圈：

<template>
  <div v-for="firstLoop in json" :key="firstLoop">
    <div v-for="secondLoop in firstLoop" :key="secondLoop">
      <div v-for="thirdLoop in secondLoop" :key="thirdLoop">
        {{thirdLoop}}
      </div>
    </div>
  </div>
</template>

輸出： 15-16 16-17 17-18 18-19 15-16 16-17 17-18 18-19

為了理解：您正在回圈定義一個 json 或陣列，而不是設定鍵（重要！）。您可以根據OUTPUT我在每次回圈后撰寫的內容查看語法的作業方式，并可以自己嘗試一下。

您還可以為您的索引創建一個索引，而v-for不是像這樣撰寫它：

<div v-for="(item, index) in json" :key="index">

比你可以參考你的index.

希望這個回答能幫到你！

uj5u.com熱心網友回復：

使用 Javascript，Object.entries()您可以將物件屬性作為可以回圈遍歷的鍵值對。

所以，例如，如果你有你的物件

const obj = {
    "1": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ],
    "2": [
        "15-16",
        "16-17",
        "17-18",
        "18-19"
    ]
}

你可以通過寫這樣的東西在你的模板中迭代它

<div 
   v-for="(key, value) in Object.entries(obj)"
   :key="key"
>
   <h1>{{ key }}</h1>
   <ul>
      <li>{{ value }}</li>
   </ul>
</div>

在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries閱讀更多

uj5u.com熱心網友回復：

回圈物件，然后在里面回圈陣列，這是一個作業示例

https://codesandbox.io/s/eager-leaf-nx2mq?file=/src/App.vue

<template>
  <div id="app">
    <div v-for="(value, propertyName) in data" :key="propertyName">
      <h1>The key of the {{ propertyName }}</h1>
      <ul>
        <li v-for="(item, index) in data[propertyName]" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      data: {
        1: ["15-16", "16-17", "17-18", "18-19"],
        2: ["15-16", "16-17", "17-18", "18-19"],
      },
    };
  },
};
</script>

標籤：javascript html json Vue.js 列表显示

上一篇：我如何與css行內居中對齊

下一篇：使用html的粗體文本