html Vue列表渲染#tags：Vue

Posted 2021-05-11

<ul id="example-1">
  <li v-for="item in items"><!-- in 可以用 of 替换 -->
    {{ item.message }}
  </li>
</ul>
<script>
  var example1 = new Vue({
    el: '#example-1',
    data: {
      items: [
        {message: 'Foo' },
        {message: 'Bar' }
      ]
    }
  })
</script>

对象迭代：
<ul id="repeat-object" class="demo">
  <li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
  </li>
</ul>
<script>
  new Vue({
    el: '#repeat-object',
    data: {
      object: {
        FirstName: 'John',
        LastName: 'Doe',
        Age: 30
      }
    }
  })
</script>

整数迭代：
<span v-for="n in 10">{{ n }}</span>
<!-- 输出 1..10 -->


用 for 提供 key
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>