初始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。可是一般过滤器更方便。