vue--显示和隐藏

一、v-if

data() {
     return {
         content: "喵喵喵",
         play: true
     }
 }

<template>
     <div id="root">
         <div v-if="play">{{ content }}</div>
         <div class="button" @click="toggle">toggle</div>
     </div>
</template>

二、v-show

<div id="root">
     <div v-show="play">{{ content }}</div>
     <div class="button" @click="toggle">toggle</div>
 </div>

根据dom结构得出v-if与v-show的区别：

v-if以删除或添加dom结点控制元素的显示隐藏

v-show是通过添加样式display:none控制元素的显示隐藏

 

总结：

v-if和v-show都可以控制元素的显示或隐藏，具体该使用哪一个应该根据使用情况决定。建议只有一次或少量切换的时候使用v-if，多次切换的情况使用v-show。写页面，当然要从性能方面考虑。