v-for、v-if & v-show

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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容