V-if和V-show

v-if

1、可以控制元素的显示和隐藏
2、v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
3、也可以和 v-else 配合使用两个元素切换显示隐藏
4、v-if是动态的向DOM树内添加或者删除DOM元素

V-show

1、v-show 的元素始终会被渲染并保留在 DOM 中，只是简单地切换元素的 CSS 属性 display

1. 相同点：

v-if和v-show都能控制元素的显示和隐藏。

2. 不同点：

1、实现本质方法不同 ;
2、v-show本质是通过设置css中的display属性为none，控制隐藏 ;
3、 v-if是动态的向DOM树内添加或者删除DOM元素。

3. 编译的区别：

1、v-show其实就是在控制css
2、v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部的事件监听和子组件。

4. 编译的条件

1、v-show都会编译，初始值为false，只是将display设为none，但它也会编译了
2、v-if初始值为false，就不会进行编译。

 <div class="settings-container">
    <div class="app-container">
        <el-card>
          <el-dialog
          title="提示"
          v-if="showDialog"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <span>这是一段信息</span>
            </el-dialog>
        </el-card>
        <button @click="fn">显示/隐藏</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog:false // 初始值为false，关闭状态
    }
  },
  methods:{
    // 绑定点击事件,点击按钮时，显示弹框
    fn() {
      this.showDialog = true
    }
  }
}
</script>