+Vue+指令(Directives) のバックアップ(No.1)

※前提条件：本情報はVue 2.0を基づいて説明してる

v-if †[edit]

<p v-if="true">Now you see me</p>

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

<p v-if="true">Now you see me</p>
<p v-else>CanSee</p>

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

<p v-show="true">Now you see me</p>

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

#codeprettify{{
<p v-for="(item,i) in list">Index:{{i}} - Item:{{item}}</p> }}

export default {
  data () {
    return {
      list: [1,2,3]
    }
  }
}

コメント：