VueJS：如何每个周期渲染几个元素？

【问题标题】：VueJS: How to render several elements per cycle?VueJS：如何每个周期渲染几个元素？
【发布时间】：2018-08-09 12:48:12
【问题描述】：

我需要渲染下一个列表：

<ul id="list">
  <li class="type-1-0">some content</li>
  <li class="type-1-1">some content</li>
  ...
  <li class="type-99-0">some content</li>
  <li class="type-99-1">some content</li>   
</ul>

我可以为此使用“v-for”指令吗？

【问题讨论】：

是的，如果你有东西，你可以迭代什么......

标签： vue.js v-for

【解决方案1】：

将range v-for 与template 标签结合使用。

<ul id="list">
  <template v-for="n of 99">
    <li :class="`type-${n}-0`">some content</li>
    <li :class="`type-${n}-1`">some content</li>
  </template>
</ul>

这是一个例子。

console.clear()

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <ul id="list">
    <template v-for="n of 99">
      <li :class="`type-${n}-0`">{{`type-${n}-0`}}</li>
      <li :class="`type-${n}-1`">{{`type-${n}-1`}}</li>
    </template>
  </ul>
</div>

注意：如果您需要支持 IE，则需要在字符串模板（或单个文件组件）中使用 template 标记或使用渲染函数。因为 IE 不支持template。

【讨论】：