Vue - 條件渲染與列表渲染

條件渲染

v-if

v-if會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

<div id="app">
    <h3 v-if="ok">Title</h3>
    <p v-if="no">Paragraph 1</p>
    <p v-if="ok">Paragraph 2</p>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        ok: true,
        no: false
    }
})
</script>

在 template 元素上使用 v-if 條件渲染分組

因為v-if是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個<template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含<template>元素。

<div id="app">
	<template v-if="show">
		<h1>Title</h1>
		<p>Paragraph 1</p>
		<p>Paragraph 2</p>
	</template>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		show: true
	}
})
</script>

v-else

v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

<div id="app">
	<!-- 如果ok為true 第一個div重建 第二個銷毀 -->
	<!-- 如果ok為false 第一個div銷毀 第二個重建 -->
	<div v-if="ok">Hello...</div>
	<div v-else>World...</div>

	<div v-if="num == 10">num = {{num}}</div>
	<div v-else>num != 10</div>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		ok: false,
		num: 10
	}
})
</script>

v-else-if

類似於 v-else，v-else-if也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。

<div id="app">
	<!-- 返回條件成立的內容 並退出判斷 -->
	<div v-if="num>10"> num = {{num}} </div>
	<div v-else-if="num>5"> num > 5 </div>
	<div v-else-if="num<5"> num < 5 </div>
</div>
<script>
new Vue({
	el: '#app',
	data: {
		num: 11
	}
})
</script>

用 key 管理可復用的元素

以下說明示例中的2個兩個模板使用了相同的元素，如果我們不想讓他們重復使用，只需添加一個具有唯一值的 key 屬性即可

<div id="app">
	<template v-if="loginType === 'username'">
		<label>UserName </label>
		<input type="text" placeholder="Enter your username">
	</template>
	<template v-else>
		<label>Email </label>
		<input type="text" placeholder="Enter your email address">
	</template>
	<input v-on:click="btn" type="button" value="切換">
</div>
<script>
new Vue({
	el: '#app',
	data: {
		loginType: 'username'
	},
	methods: {
		btn: function(){
			if(this.loginType === "username"){
				this.loginType = "email"
			}else{
				this.loginType = 'username'
			}
		}
	}
})
</script>

那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。

> Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可。 > 現在，每次切換時，輸入框都將被重新渲染 ```

``` 

v-show

v-show 只是簡單地切換元素的 CSS 屬性 display，為false的時候，則display: none

v-show 不支持 <template> 元素，也不支持 v-else

<div id="app">
	<p v-show="ok">永遠相信美好的事情即將發生</p>    
</div>
<script>
new Vue({
    el: '#app',
    data: {
    	ok: false
    }
})
</script>

v-if 與 v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

## 列表渲染 ### v-for 數組渲染 > 數組渲染 提供兩個參數 ( 值， 索引 ) ```

{{index}} - {{item}}

``` 
### v-for 對象渲染 > 對象渲染 提供三個參數 ( 值， 鍵名， 索引 ) ```

{{index}}. {{key}} : {{value}}

``` 
### 顯示過濾/排序結果 有時，我們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種情況下，可以創建返回過濾或排序數組的計算屬性。 ```

{{n}}

![](https://images2018.cnblogs.com/blog/1321525/201806/1321525-20180606134518684-702061938.png)
<br />
在計算屬性不適用的情況下 (例如，在嵌套 v-for 循環中) 你可以使用一個 ` method ` 方法：

{{n}}

``` 

v-for in template

類似於 v-if，可以利用帶有 v-for 的 <template> 渲染多個元素

<div id="app">
	<template v-for="(item, key, index) in items">
        <p>{{item}}</p>   
        <div>{{index}}. {{key}} - {{item}}</div>
    </template>  
</div>
<script>
new Vue({
    el: '#app',
    data: {
    	items: {
            firstName: 'heibai',
            lastName: 'xiaobai',
            age: 18
        }
    }
})
</script>

v-for with v-if

當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重復運行於每個 v-for 循環中。當你想為僅有的一些項渲染節點時，這種優先級的機制會十分有用。
下面這個例子是先進行 v-for 的渲染，然后在進行 v-if 的渲染。

<div id="app">
    <div v-if="item.ok" v-for="(item, key) in items">{{item.test}}</div> 
    <div v-else>你看吧</div>
</div>
<script>
new Vue({
    el: '#app',
    data: {
        items: [
        	{ test: 'xiaobai', ok: true},
        	{ test: 'heibai', ok: false},
        	{ test: 18, ok: true}
        ]
    }
})
</script>

如果你的目的是有條件地跳過循環的執行，那么可以將 `v-if` 置於外層元素 (或 `