Question

我需要呈现下一个列表：

<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”指令吗？

Answer 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。

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

1 个答案: