Vue學習筆記（三）條件渲染和迴圈渲染

CodeReaper發表於2021-08-08
Vue筆記

目錄

一、條件渲染

條件判斷渲染相關的指令：

  • v-if
  • v-else
  • v-elif
  • v-show

1. v-if

v-if 指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 true 值的時候被渲染。

例如：

<h2 v-if="isShow">
  <div>abc</div>
  <div>abc</div>
  <div>abc</div>
  <div>abc</div>
  Hello world!
</h2>

當 isShow 為 true 時：

image-20210808104338075

而為 false 時：

image-20210808104436875

2. 與v-else配合使用

<div id="app">
  <h2 v-if="isShow">
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    <div>abc</div>
    Hello world!
  </h2>
  <h2 v-else>
    如果isShow==false，顯示我
  </h2>
</div>

當isShow為false時：

image-20210808104735009

3. 與v-else-if配合使用

<div id="app">
  <!-- 但一般不這樣使用，一般條件很多的時候在計算屬性中解決 -->
  <h2 v-if="score>=90">優秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>
  分數：<input type="text" v-model="score">
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      score: 99
    }
  });
</script>

執行結果：

image-20210808105325919 Vue學習筆記（三）條件渲染和迴圈渲染 Vue學習筆記（三）條件渲染和迴圈渲染 Vue學習筆記（三）條件渲染和迴圈渲染

4. v-show的使用

用法和 v-if 基本一致：

<!-- v-if: 當條件為false時，包含v-if指令的元素根本不存在（一次）-->
<h2 v-if="isShow" id="aaa">{{message}}</h2>

<!-- 而v-show只是新增了行內樣式而已（頻繁變化時）-->
<h2 v-show="isShow" id="bbb">{{message}}</h2>

官網給出來的兩者的區別：

image-20210808105931968

5. 型別切換案例

<span v-if="isUser">
  <label for="username">使用者賬號</label>
  <input type="text" placeholder="使用者賬號" id="username" key="username">
</span>
<span v-else>
  <label for="email">使用者郵箱</label>
  <input type="text" placeholder="使用者郵箱" id="email" key="email">
</span>
<button @click="change_login_type">切換型別</button>

var app = new Vue({
  el: '#app',
  data: {
    isUser: true
  },
  methods: {
    change_login_type() {
      this.isUser = !this.isUser;
    }
  }
});
image-20210808110229134 Vue學習筆記（三）條件渲染和迴圈渲染

二、列表渲染

我們可以用 v-for 指令基於一個陣列來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名。

1. 遍歷陣列

準備資料：

var app = new Vue({
  el: '#app',
  data: {
    names: ['mike', 'jack', 'sara']
  },
  methods: {}
});

遍歷渲染：

<!-- 沒有使用下標值 -->
<ul>
  <li v-for="item in names">{{item}}</li>
</ul>

當需要使用下標值時使用：(item, index) in items形式的語法：

<!-- 獲取索引值 -->
<ul>
  <li v-for="(item, index) in names">
    {{index+1}} -- {{item}}
  </li>
</ul>

執行結果：

image-20210808111030596

此外也可以使用 item of items 的語法。

2. 遍歷物件

語法：

遍歷物件的所有值：v-for="value in myObject"

此外也可以通過：v-for="(value, name) in myObject" 來獲取鍵資訊

示例：

準備資料

var app = new Vue({
  el: '#app',
  data: {
    info: {
      name: "why",
      age: 18,
      height: 1.88
    }
  },
  methods: {}
});

獲取value

<ul>
  <!-- 1.value -->
  <li v-for="item in info">
    {{item}}
  </li>
</ul>

同時獲取key

<!-- 2.獲取key-value -->
<ul>
  <li v-for="(key, value) in info">
    {{key}} -- {{value}}
  </li>
</ul>

同時獲取index

<ul>
  <li v-for="(key, value, index) in info">
    {{index+1}}--{{key}}--{{value}}
  </li>
</ul>

執行結果：

image-20210808114854368

3. 迴圈渲染中key的使用

以下解釋摘自官網：https://v3.cn.vuejs.org/api/special-attributes.html#key

key 特殊 attribute 主要用做 Vue 的虛擬 DOM 演算法的提示，以在比對新舊節點組時辨識 VNodes。如果不使用 key，Vue 會使用一種演算法來最小化元素的移動並且儘可能嘗試就地修改/複用相同型別元素。而使用 key 時，它會基於 key 的順序變化重新排列元素，並且 key 不再存在的元素將始終被移除/銷燬。

有相同父元素的子元素必須有唯一的 key。重複的 key 會造成渲染錯誤。

簡單來說使用key可以提高程式的效率，但需要保證相同父元素的子元素必須有唯一的 key。

但是對於一般的陣列來說是不能使用index作為 v-for 指令的 key 的，詳細解析見：Vue2.0 v-for 中 :key 到底有什麼用？ - 方應杭的回答 - 知乎 https://www.zhihu.com/question/61064119/answer/766607894

那如果不使用 index ，那使用什麼東西作為 key 呢？這裡知乎大神給出了答案：

沒有 id 怎麼辦？

  1. 建立一個 id() 函式，每次呼叫自增一
  2. 使用 guid 庫或者 uuid() 庫
  3. 最好使用資料庫中的 id

具體示例如下：

var app = new Vue({
  el: '#app',
  data: {
    letters: ['a', 'b', 'c', 'd', 'e'],
    curId: 0
  },
  methods: {
    getId() {
      res = this.curId;
      this.curId++;
      return res;
    }
  }
});

<div id="app">
  <ul>
    <li v-for="item in letters" :key="getId()">{{item}} </li>
  </ul>
</div>

執行結果：

image-20210808120443979

4. 哪些陣列方法是響應式的

是響應式的方法：

  1. push(Object obj)
  2. pop()
  3. shift() 刪除第一個
  4. unshift() 在陣列前面新增元素，可以多個
  5. splice() 移除指定下標範圍的元素
  6. sort() 排序元素
  7. reverse() 反轉元素
  8. 使用Vue.set(this.xxx, 0, "aaa")來代替 this.xxx[0]="aaa"; 修改元素的值。

5. CoderWhy老師留下作業的完成

要求：展示出列表 ['海王', '海爾兄弟', '火影忍者', '進擊的巨人'] 中的資料，當滑鼠點選某個文字時，該文字變成紅色，而其他文字為原來的黑色。（即選中高亮）

css部分：

.active {
  color: red;
}

js部分：

var app = new Vue({
  el: '#app',
  data: {
    movies: ['海王', '海爾兄弟', '火影忍者', '進擊的巨人'],
    currentIndex: -1
  },
  methods: {
    onClick(li_index) {
      this.currentIndex = li_index;
    }
  }
});

html部分：

<ul>
  <!-- <li v-for="movie in movies">{{movie}}</li> -->
  <li v-for="(movie, index) in movies" :class="{active:index===currentIndex}" @click="onClick(index)">
    {{movie}}
  </li>
</ul>

實現效果：

點選第一個：

image-20210808140818528

點選第三個：

image-20210808140840124

相關文章