VueJS: как отображать несколько элементов за цикл?

Мне нужно отобразить следующий список:

<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
person Kypaku    schedule 09.08.2018    source источник
comment
да, если у вас есть что-то, на чем вы можете повторить....   -  person Bublik    schedule 09.08.2018

Ответы (1)


arrow_upward
1
arrow_downward

Используйте диапазон 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 в строковом шаблоне (или компоненте одного файла), либо вместо этого использовать функцию рендеринга. потому что template не поддерживается в IE.

person Bert    schedule 09.08.2018