條件渲染

條件渲染，就滿足一定的條件以后才會渲染。

v-if

v-if指令類似于，js中的if語句，當(dāng)條件滿足時(shí)才會執(zhí)行

<span v-if="ok">v-if</span> //ok的值為true，span標(biāo)簽才會被渲染
<template v-if="ok"> //同時(shí)渲染多個(gè)元素
  <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語句，當(dāng)v-if條件不成立是，v-else就會渲染。

<span v-if="ok">v-if</span>
<span v-else>v-else</span> //當(dāng)ok 的值為false，是渲染

v-else必須緊跟著在v-if或者v-else-if的到后面，否則不會被識別。

v-else-if

是2.1.0新增加的指令，類似于js中的else if，可以鏈?zhǔn)绞褂枚啻巍?/p>

<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管理可復(fù)用的元素

vue會盡可能的高效的渲染元素，通常會復(fù)用已有元素而不會從頭渲染

 <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>

上面例子因?yàn)閮蓚€(gè)p標(biāo)簽用用了相同的元素，<input>不會被替換掉，僅僅是替換了他的placeholder。

username顯示時(shí)，輸入框里面輸入的1

切換到，email是1任然存在，說明input是復(fù)用之前的input

當(dāng)我們不想復(fù)用他們時(shí)，只要加上唯一的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不見了，說明兩個(gè)input不是同一個(gè)，沒有復(fù)用之前的了

注意, <label> 元素仍然會被高效地復(fù)用，因?yàn)樗鼈儧]有添加 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 是真正的條件渲染，因?yàn)樗_保在切換過程中條件塊內(nèi)部的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建
• v-if也是惰性的，如果在處事渲染時(shí)條件為假，則什么也不做，直到條件為真時(shí)，才開始渲染條件塊
• v-show就簡單的多，不管條件是啥總會被渲染，并且只是簡單的基于css的切換
• 一般需要頻繁的切換就是用v-show，運(yùn)行條件不太會改變則使用v-if
• 當(dāng) v-if與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級

列表渲染

v-for

我們用 v-for 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。基本用法如下：

<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 還支持可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引

<ul>
      <li v-for="(val,index) in items" v-text="(index+1) + '. ' + val.text"></li>
</ul>

帶了索引的示例

利用template標(biāo)簽同時(shí)渲染多個(gè)標(biāo)簽

<ul>
      <template v-for="(val, index) in items">
          <li>{{index}}</li>
          <li>{{val.text}}</li>
       </template>
 </ul>

同時(shí)渲染兩個(gè)li的示例

對象的迭代，是按 Object.keys() 的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 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>

整數(shù)迭代示例

當(dāng)?shù)秩居錾辖M件

<div id="#app">
    <my-ul :items="items"></my-ul> //將數(shù)據(jù)注入子組件
</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']  //接受父組件傳進(jìn)了的數(shù)據(jù)
    });
 var vm = new Vue({
        el: '#app',
        data: {
           items: [
               {text: 'item1'},
               {text: 'item2'},
               {text: 'item3'}
           ]
        }
    });
</script>

組件循環(huán)示例

key

當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略。
建議盡可能使用v-for 來提供 key ，除非迭代 DOM 內(nèi)容足夠簡單，或者你是故意要依賴于默認(rèn)行為來獲得性能提升。用法跟前面一樣。

數(shù)組的更新檢查

Vue包含一組觀察數(shù)組的變異方法，所以它們也將會觸發(fā)視圖更新。這些方法如下

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()
  這些方法都會改變原數(shù)組，也有一些方法是返回一個(gè)新數(shù)組，不會改變原數(shù)組。例如： filter(), concat(), slice() 。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組。
  注意事項(xiàng)
  由于 JavaScript 的限制， Vue 不能檢測以下變動(dòng)的數(shù)組：
• 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
• 當(dāng)你修改數(shù)組的長度時(shí)，例如： vm.items.length = newLength

解決方法：

Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
example1.items.splice(newLength)

數(shù)據(jù)過濾

我們想要顯示一個(gè)數(shù)組的過濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。

 奇數(shù)：<span v-for="i in odd">{{i}}</span>
 偶數(shù)：<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;
                })
            }
        }

    });

過濾示例

官方API

Vue