Question

如何使用v-for模板遍历输出对象

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [14, 165, 113, 19, 22],
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span v-for="value in output">
    <h6>{{value.player}}</h6>
    <h6>{{value.monster}}</h6>
  </span>
</div>

提前感谢

Answer 1

听起来您想要嵌套的v-for。第一个v-for循环遍历对象，其中value是对象值（在您的情况下为数字数组）。第二个v-for遍历该数组

<div id="app">
  <div v-for="value in output">
      <span v-for="num in value">
          {{ num }}
      </span>
  </div>
</div>

Answer 2

您可以通过两种方式完成操作

像我的代码片段一样，分别遍历output.player和output.monster。

或者就像@LLai所指出的那样嵌套，这有助于防止output对象中的属性数量未知的情况。

new Vue({
  el: app,
  data: {
    output: {
      player: [1, 5, 61, 98, 15, 315, 154, 65],
      monster: [14, 165, 113, 19, 22],
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>
    <h6 v-for="pla in output.player">{{pla}}</h6>
    <h6 v-for="mon in output.monster">{{mon}}</h6>
  </span>
</div>

如何使用v-for在vue.js中的对象内部遍历数组

提前感谢

2 个答案: