4.3vue常见指令之v-for:

v-for

这个指令用于对某一元素循环动态生产结构

在vue中只有一种：v-for

可遍历数组和对象

你想循环动态生成什么，就在这个结构中添加v-for

• 遍历数组

• 语法：<标签 v-for='(value,index) in 遍历源' :key='''' >
  :key=''''可以表示当前数据行,为以后操作提高效率,它必须是唯一的

• 遍历对象

• 语法：<标签 v-for='(value,key,index) in 遍历源' :key='''' >

• 细节说明

  <template>
      <div class="for">
          <p>这个文件描述v-for的使用</p>
          <!-- 遍历数组 -->
          <p>对于数组，可以遍历出数组的value和index (值和索引)</p>
          <p>:key:可以唯一标识当前数据行，后期的操作可以提高效率，这个值必须是唯一值</p>
          <ul>
              <li v-for='(value,index) in arr' :key='index'>{{value + ":"+ index}}</li>
          </ul>
          <!-- 遍历对象 -->
          <p>对于对象，可以遍历出对象的value,key,index,(值，key,index)</p>
          <div v-for='(v,k,i) in obj' :key='k'>{{k+":"+v+":"+i}}</div>
          <!-- 遍历对象数组 -->
          <table border="1" width='600px'>
              <thead>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>性别</th>
              </thead>
              <tbody>
                  <tr v-for='(value,index) in userlist' :key='index'>
                      <td>{{value.name}}</td>
                      <td>{{value.age}}</td>
                      <td>{{value.gender}}</td>
                      <!-- <td v-for='(v,k) in value' :key='k'>{{v}}</td> -->
                  </tr>
              </tbody>
          </table>
      </div>
  </template>
  <script>
  export default {
    data () {
      return {
        arr: [1, 3, 5, 7, 9, 11],
        obj: {
          name: 'jack',
          age: 20,
          gender: '男'
        },
        userlist: [
          { name: 'jack',
            age: 21,
            gender: '男' },
          { name: 'rose',
            age: 18,
            gender: '女',
            subject: '大前端' },
          { name: 'tom',
            age: 19,
            gender: '男' }
        ]
      }
    }
  }
  </script>
  <style lang="less" scoped>
  
  </style>