前面我们学习了，条件渲染v-if，可通过指定的条件来控制dom节点的显示和隐藏，跟v-if相似的还有一个v-show指令，都是通过条件来控制dom节点的显示和隐藏的。

v-show基本语法

新建一个demo14.html页面，老样子复制一下hello world基础结构代码。我们来声明一个isShow，默认等于false。然后我们就在div上来使用v-show，用法和v-if 一样。

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!",
        isShow:false
      }
    },
    template: `<div v-show="isShow">{{message}}</div>`
  })
const vm = app.mount("#app")

多的我们就不说，直接上浏览器看效果，空白啥也没有，我们打开调试工具来修改一下isShow为true，这样它又显示出来了。

v-if和v-show的区别

我们再来写一个div，给这个div用上v-if控制显示和隐藏，我们来看看他们的区别。在这个对里面我们来上一句话 “这是v-if控制的”。

const app = Vue.createApp({
    data() {
      return {
        message: "hello world!",
        isShow:false
      }
    },
    template: `
      <div v-show="isShow">{{message}}</div>
      <div v-if="isShow">{{message}}</div>
    `
  })

然后看看效果，界面上现在是两个div都没有显示，我们来吧isShow改成true，现在两个div都显示了，那么它们之间到底有什么区别呢，其实他们看是功能一样，其实它们各有各的优势，比如v-if比较灵活和它搭配的还有v-else 和 v-else-if，而v-show就不具备这样的条件，然后我们再来element中看看，v-show它主要是通过控制css display属性来达到显示和隐藏效果的，我们我再来把isShow改成false。这是时候hello world 的div中display被设置成none，而v-if这个div直接不在了，被删除掉了，这就是它们两之间的区别。大家根据需求来使用，频繁需要显示和隐藏的数据大家使用v-show，v-if会删除和渲染dom或多或少会比v-show多占性能。