一、條件渲染
條件判斷渲染相關的指令：
v-ifv-elsev-elifv-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 時：
而為 false 時：
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時：
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>
執行結果：
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>
官網給出來的兩者的區別：
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;
}
}
});
二、列表渲染
我們可以用 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>
執行結果：
此外也可以使用 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>
執行結果：
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 怎麼辦？
- 建立一個 id() 函式，每次呼叫自增一
- 使用 guid 庫或者 uuid() 庫
- 最好使用資料庫中的 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>
執行結果：
4. 哪些陣列方法是響應式的
是響應式的方法：
push(Object obj)pop()shift()刪除第一個unshift()在陣列前面新增元素，可以多個splice()移除指定下標範圍的元素sort()排序元素reverse()反轉元素- 使用
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>
實現效果：
點選第一個：
點選第三個：
