v-for

這個指令用于對某一元素循環(huán)動態(tài)生產結構

在vue中只有一種：v-for

可遍歷數(shù)組和對象

你想循環(huán)動態(tài)生成什么，就在這個結構中添加v-for

• 遍歷數(shù)組

• 語法：<標簽 v-for='(value,index) in 遍歷源' :key='''' >
  :key=''''可以表示當前數(shù)據(jù)行,為以后操作提高效率,它必須是唯一的

• 遍歷對象

• 語法：<標簽 v-for='(value,key,index) in 遍歷源' :key='''' >

• 細節(jié)說明

  <template>
      <div class="for">
          <p>這個文件描述v-for的使用</p>
          <!-- 遍歷數(shù)組 -->
          <p>對于數(shù)組，可以遍歷出數(shù)組的value和index (值和索引)</p>
          <p>:key:可以唯一標識當前數(shù)據(jù)行，后期的操作可以提高效率，這個值必須是唯一值</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>
          <!-- 遍歷對象數(shù)組 -->
          <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>