初始Vue- Vue.js條件渲染

Vue.js條件渲染

一、 v-if

• v-if是真實的條件渲染，它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子組件。有更高的切換消耗。
• v-show只是簡單地基於 CSS 切換。 有更高的初始渲染消耗。
• 須要頻繁切換用v-show，若是在運行時條件不大可能改變用v-if。

二、v-for

使用 v-for 指令基於一個數組渲染一個列表

<ul id="demo"><li v-for="item in items">{{ item.message }}</li></ul>
----------------------------------------------------
var demo = new Vue({
  el: '#demo',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

從1.0.17開始可使用of分隔符，更接近JavaScript遍歷器語法：

<div v-for="item of items"></div>

三、template v-for

相似於 template v-if，也能夠將 v-for 用在 <template> 標籤上，以渲染一個包含多個元素的塊。

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

四、變異方法

• push()/pop()
• shift()/unshift()
• splice()
• sort()/reverse()

五、替換數組

不會修改原始數組而是返回一個新數組的非變異方法，直接用新數組替換舊數組：

demo.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/);
})

注： filter()/concat()/slice()

六、track-by

用全新對象替換數組，使用track-by特性給Vue.js提示，以儘量地複用已有實例。

{items: [
    { _uid: ‘88f869d’, ... }, { _uid: ‘7496c10’, ... }
]}

<div v-for="item in items" track-by="_uid">
    <!-- content -->
</div>

七、track-by $index

• 使用track-by="$index"強制讓v-for進入原位更新模式；
• 片段不會被移動，而是簡單地以對應索引的新值刷新；
• DOM節點再也不映射數組元素順序的改變，不能同步臨時狀態以及組件的私有狀態；
• Vue.js擴展了觀察數組，爲它添加了一個$set()方法；
• Vue.js也爲觀察數組添加了$remove()方法，用於從目標數組中查找並刪除元素，在內部自動調用splice()。

八、顯示過濾/排序的結果

• 想要顯示過濾/排序過的數組，同時不實際修改或重置原始數據。有兩個辦法：
  1.建立一個計算屬性，返回過濾/排序過的數組；
  2.使用內置的過濾器 filterBy 和 orderBy。

• 計算屬性有更好的控制力，也更靈活，由於它是全功能 JavaScript。可是一般過濾器更方便。