vue2 - 列表渲染

v-for指令：

1.用于展示列表数据

2.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

3.v-for="(item,index) of Array" :key="index" 适合遍历数组

4.v-for="(value,name,index) of Object" :key="index" 适合遍历对象

<div id="root">
  <!--遍历数组-->
  <div v-for="(item,index) of array" :key="index">
    {{item}} - {{index}}
  </div>
  <!--遍历对象-->
  <div v-for="(value,name,index) in user" :key="index">
    {{value}} - {{name}} - {{index}}
  </div>
  <!--遍历字符串-->
  <div v-for="(char,index) of token" :key="index">
    {{char}} - {{index}}
  </div>

  <div v-for="(char,index) in token" :key="index">
    {{char}} - {{index}}
  </div>
  <!--遍历指定次数-->
  <div v-for="(value,index) of 20" :key="index">
    {{value}} / {{index}}
  </div>

  <div v-for="(value,index) of 20" :key="index">
    {{value}} / {{index}}
  </div>
</div>

<script>
  const vm = new Vue({
    el: '#root',
    data() {
      return {
        array: ['book',2,{name: '自专'}],
        user: {name: 'levi',password: '123'},
        token: '12ssdfaassaf1ef'
      }
    }
  })
</script>