vue 中 v-for的用法

v-for: 用于循環(huán)數(shù)據(jù)，語法v-for="(item, i) in list",其中i指的是索引，item指的是循環(huán)的每一項(xiàng)；

例：循環(huán)一個(gè)數(shù)組

<div id="app">
    <!-- <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
    <p>{{list[3]}}</p>
    <p>{{list[4]}}</p> -->

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

  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>

例：循環(huán)一個(gè)對象數(shù)組

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

  <script>
    // 創(chuàng)建 Vue 實(shí)例，得到 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>

例：循環(huán)一個(gè)對象

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

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

例：迭代數(shù)字

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

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

• 重點(diǎn)：v-for當(dāng)中key的使用

<div id="app">

    <div>
      <label>Id:
        <input type="text" v-model="id">
      </label>

      <label>Name:
        <input type="text" v-model="name">
      </label>

      <input type="button" value="添加" @click="add">
    </div>

    <!-- 注意： v-for 循環(huán)的時(shí)候，key 屬性只能使用 number獲取string -->
    <!-- 注意： key 在使用的時(shí)候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 -->
    <!-- 在組件中，使用v-for循環(huán)的時(shí)候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時(shí)，指定 唯一的 字符串/數(shù)字 類型 :key 值 -->
    <p v-for="item in list" :key="item.id">
      <input type="checkbox">{{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        id: '',
        name: '',
        list: [
          { id: 1, name: '李斯' },
          { id: 2, name: '嬴政' },
          { id: 3, name: '趙高' },
          { id: 4, name: '韓非' },
          { id: 5, name: '荀子' }
        ]
      },
      methods: {
        add() { // 添加方法
          this.list.unshift({ id: this.id, name: this.name })
        }
      }
    });
  </script>

vue中v-if 和 v-show的使用

v-if: 每次都會(huì)重新刪除或創(chuàng)建元素;
v-show: 每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式;

<div id="app">

    <!-- <input type="button" value="toggle" @click="toggle"> -->
    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特點(diǎn)：每次都會(huì)重新刪除或創(chuàng)建元素 -->
    <!-- v-show 的特點(diǎn)： 每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式 -->

    <!-- v-if 有較高的切換性能消耗 -->
    <!-- v-show 有較高的初始渲染消耗 -->

    <!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
    <!-- 如果元素可能永遠(yuǎn)也不會(huì)被顯示出來被用戶看到，則推薦使用 v-if -->
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>

  </div>

  <script>
    // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>