條件渲染
條件渲染，就滿足一定的條件以后才會渲染。
v-if
v-if指令類似于，js中的if語句，當條件滿足時才會執行
<span v-if="ok">v-if</span> //ok的值為true，span標簽才會被渲染
<template v-if="ok"> //同時渲染多個元素
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
var vm = new Vue({
el: '#app',
data: {
ok: true,
no: true,
type: 'c',
toggle: true
}
});
v-else
v-else指令，類似于js中的else語句，當v-if條件不成立是，v-else就會渲染。
<span v-if="ok">v-if</span>
<span v-else>v-else</span> //當ok 的值為false，是渲染
v-else必須緊跟著在v-if或者v-else-if的到后面，否則不會被識別。
v-else-if
是2.1.0新增加的指令，類似于js中的else if，可以鏈式使用多次。
<p v-if="type === 'a'">a</p>
<p v-else-if="type === 'b'">b</p>
<p v-else="">not a and b</p>
v-else-if必須緊跟著在v-if或者v-else-if的到后面，否則不會被識別。
用key管理可復用的元素
vue會盡可能的高效的渲染元素，通常會復用已有元素而不會從頭渲染
<p v-if="toggle"><label>username </label> <input type="text" placeholder="username"></p>
<p v-else=""><label>email</label> <input type="text" placeholder="email"></p>
<button @click="toggle = !toggle">toggle</button>
上面例子因為兩個p標簽用用了相同的元素，<input>不會被替換掉，僅僅是替換了他的placeholder。
username顯示時，輸入框里面輸入的1
切換到，email是1任然存在，說明input是復用之前的input
當我們不想復用他們時，只要加上唯一的key屬性
<p v-if="toggle"><label>username </label> <input type="text" placeholder="username" key="username"></p>
<p v-else=""><label>email</label> <input type="text" placeholder="email" key="email"></p>
<button @click="toggle = !toggle">toggle</button>
加上可以以后，在username上輸入了1
切換到email下，1不見了，說明兩個input不是同一個，沒有復用之前的了
注意, <label> 元素仍然會被高效地復用，因為它們沒有添加 key 屬性。
v-show
v-show與v-if的用法幾乎一致
<span v-show="ok">v-show</span>
v-show VS v-if
-
v-show不支持<template>語法，也不支持v-else。 -
v-if是真正的條件渲染，因為他確保在切換過程中條件塊內部的事件監聽器和子組件適當的被銷毀和重建 -
v-if也是惰性的，如果在處事渲染時條件為假，則什么也不做，直到條件為真時，才開始渲染條件塊 -
v-show就簡單的多，不管條件是啥總會被渲染，并且只是簡單的基于css的切換 - 一般需要頻繁的切換就是用
v-show，運行條件不太會改變則使用v-if - 當
v-if與v-for一起使用時，v-for具有比v-if更高的優先級
列表渲染
v-for
我們用 v-for 指令根據一組數組的選項列表進行渲染。基本用法如下：
<div id="app">
<ul>
<li v-for="item in items" v-text="item.text"></li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data: {
items: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'}
]
}
});
基本用法示例
v-for 還支持可選的第二個參數為當前項的索引
<ul>
<li v-for="(val,index) in items" v-text="(index+1) + '. ' + val.text"></li>
</ul>
帶了索引的示例
利用template標簽同時渲染多個標簽
<ul>
<template v-for="(val, index) in items">
<li>{{index}}</li>
<li>{{val.text}}</li>
</template>
</ul>
同時渲染兩個li的示例
對象的迭代，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的
<span v-for="key in obj">{{key}}</span>
<p v-for="(key, value) in obj">{{key}}: {{value}}</p>
<p v-for="(key, value, index) in obj">{{key}}: {{value}}: {{index}}</p>
對象迭代示例
<button v-for="i in 10">{{i}}</button>
整數迭代示例
當迭代渲染遇上組件
<div id="#app">
<my-ul :items="items"></my-ul> //將數據注入子組件
</div>
<template id="myul">
<ul>
<li v-for="i in items">{{i.text}}</li>
</ul>
</template>
<script>
Vue.component('my-ul',{
template: '#myul',
props: ['items'] //接受父組件傳進了的數據
});
var vm = new Vue({
el: '#app',
data: {
items: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'}
]
}
});
</script>
組件循環示例
key
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。
建議盡可能使用v-for 來提供 key ，除非迭代 DOM 內容足夠簡單，或者你是故意要依賴于默認行為來獲得性能提升。用法跟前面一樣。
數組的更新檢查
Vue包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
這些方法都會改變原數組，也有一些方法是返回一個新數組，不會改變原數組。例如： filter(), concat(), slice() 。當使用非變異方法時，可以用新數組替換舊數組。
注意事項
由于 JavaScript 的限制， Vue 不能檢測以下變動的數組： - 當你利用索引直接設置一個項時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
解決方法：
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)
數據過濾
我們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。
奇數：<span v-for="i in odd">{{i}}</span>
偶數：<span v-for="i in even(number)">{{i}}</span>
var vm = new Vue({
el: '#app',
data: {
number: [1,2,3,4,5,6]
},
computed: {
odd: function(){
return this.number.filter(function(i){
return i%2 === 1;
})
}
},
methods: {
even: function(arr){
return arr.filter(function(i){
return i%2 === 0;
})
}
}
});
過濾示例
