1.3 条件渲染、列表渲染

1. 条件渲染

1.1 条件渲染指令
1) v-if 与 v-else

2) v-show

1.2 比较 v-if 与 v-show
3) 如果需要频繁切换 v-show 较好

4) 当条件不成立时,v-if 的所有子节点不会解析(项目中使用)

div id="demo">
  <p v-if="ok">表白成功</p>
  <p v-else>表白失败</p>

  <hr>
  <p v-show="ok">求婚成功</p>
  <p v-show="!ok">求婚失败</p>

  <button @click="ok=!ok">切换</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      ok: true,
    }
  })
</script>