v-if

写法：

1、v-if="表达式"

2、v-else-if="表达式"

3、v-else="表达式"

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注： v-if可与v-else-if、v-else配合使用，其结构不可打断

v-show

写法：v-show="表达式"

适用于：切换频率较高的场景

特点：不展示的DOM不被移除，只进行样式上的隐藏

Tips： 使用v-if时，元素可能无法获取，使用v-show时，元素可获取

<div id="app">
    <h3 v-show="isShow">代码{{test}}</h3>
    <h3 v-if="isShow">代码{{test}}</h3>
</div>
<script>
  Vue.config.productionTip = false;
  var vm = new Vue({
    el: "#app",
    data: {
        test:'测试',
        isShow:true
    }
  });
</script>

Vue 条件渲染（Day11）

v-if

v-show