vshowDemo

控制显示隐藏:

(1). 一个元素，控制是否显示：v-show

<元素 v-show=“判断条件”>

结果：每次new Vue扫描带有v-show的元素时，都会动态判断条件。如果条件返回true，就正常显示。如果条件返回false，就自动翻译为display:none，隐藏该元素

(2). 两个元素，二选一显示: v-if v-else

<元素1 v-if=“条件”>

<元素2 v-else>

结果: 在扫描时，如果条件为true，就显示v-if的元素，如条件为false，就显示v-else的元素

强调: v-if和v-else两个元素之间禁止插入其他元素。两个元素必须紧邻

v-show vs v-if

v-show使用display:none隐藏元素 —— 效率高

v-if是通过删除元素方式隐藏元素 —— 效率低