v-if和v-show 条件渲染

v-if vs v-show

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

• 不推荐同时使用 v-if 和 v-for。

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-if / v-else-if / v-else 一起使用

<template>
  <div>
    <!-- v-if 和 v-else 一起使用 -->
    <template>
      <p v-if="isOnline">在线</p>
      <p v-else>不在线</p>
    </template>
    
    <!-- v-if和v-else-if和v-else 一起使用 -->
    <template>
      <p v-if="type === 'A'">优秀</p>
      <p v-else-if="type === 'B'">及格</p>
      <p v-else>不及格</p>
    </template>

  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isOnline: true,
      type: 'B'
    };
  },
};
</script>

用key管理可复用元素

<template>
  <div>
    <!-- 用key复用可管理元素 -->
    <template v-if="type === 'username'">
      <label>Username</label>
      <!-- 这里添加key是为了在toggle的时候，区别这个两个input框 -->
      <input placeholder="Enter your username" key="username" />
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="pswd" />
    </template>
    <br />
    <button @click="toggleHandle">toggle</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      type: "username",
    };
  },
  methods: {
    toggleHandle() {
      this.type = this.type === "username" ? "other" : "username";
    },
  },
};
</script>

v-show

<h1 v-show="ok">Hello!</h1>

• 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
• 注意，v-show 不支持 <template> 元素，也不支持 v-else。