Vue研习录（03）——条件渲染详解及示例分析

---

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

---

  重拾前端记忆，记录学习笔记，现在进入条件渲染部分

一、v-if

  v-if指令用于条件性的渲染一块内容，这块内容只有在指令的表达式返回true时才会被渲染。

二、v-else

  v-else则用来表示v-if的“else模块“

除此之外还有v-else-if

<template>
  <div class="hello">
    <div>
      <button @click="warnDisabled">Click me</button>
      <p v-if="disabled">点击了这个按钮</p>
      <p v-else>请点击按钮</p>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    warnDisabled() {
      this.disabled = true
      setTimeout(() => {
        this.disabled = false
      }, 1500)
    }
  }
}


</script>

  结果如下，点击前：

  点击后，并且在1.5秒后恢复原样

三、v-show

  v-show也可以用于条件性展示元素，当表达式返回值为true时才会被渲染

注意：v-if系列可以使用在<template>元素上，这只是一个不可见的包装器元素，最后渲染的结果并不会包含这个<template> 元素。
而v-show则不可在<template>元素上使用

四、v-if和v-show的区别

  v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

  v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

  相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

  总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。