v-for--循環數組---循環對象---迭代數字

循環簡單數組

 <p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p>

 // 創建 Vue 實例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        list: [1, 2, 3, 4, 5, 6]

      },

      methods: {}

    });

循環復雜組數

 <div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>

循環對象

 <div id="app">
    <!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有  val  key  ,在第三個位置還有 一個 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大顆',
          gender: '男'
        }
      },
      methods: {}
    });

迭代數字

<div id="app">
    <!-- in 后面我們放過  普通數組，對象數組，對象， 還可以放數字 -->
    <!-- 注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始 -->
    <p v-for="count in 10">這是第 {{ count }} 次循環</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>