『VUE』05. 条件渲染（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

在前文的项目基础上继续~

新建IfDemo.vue

IfDemo.vue内容如下

<script>

</script>

<template>

</template>

---

在app.vue中引入其他vue组件

把HelloWorld 和IfDemo 导入并显示在模板中.
这么做就错啦~你会发现网页什么都没有
app.vue

<script>
import HelloWorld from "./components/HelloWorld.vue";
import IfDemo from "./components/IfDemo.vue";
</script>

<template>
  <HelloWorld />
  <IfDemo />
</template>

下面才是正确的vue3写法<script setup>在 Vue 3 中,<script setup>提供了更强大的功能，包括自动注入 props、context 和 emit 等常见组件选项，从而简化了组件的编写过程。而传统的<script>区块需要手动导入和定义组件选项，可能会造成一些不必要的繁琐操作.

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import IfDemo from "./components/IfDemo.vue";
</script>

<template>
  <HelloWorld />
  <IfDemo />
</template>

---

v-if 和 v-else

注意flag === true用于判断v-if中的值
IfDemo.vue

<template>
  <br />
  <h3>条件渲染</h3>
  <br />
  <div v-if="flag === true">flag:true</div>
  <div v-else>flag:false</div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
};
</script>

---

v-if | v-else-if | v-else

IfDemo.vue

<template>
  <br />
  <h3>条件渲染</h3>
  <br />
  <div v-if="flag">flag:true</div>
  <div v-else>flag:false</div>
  <br />
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>not A B C</div>
</template>
<script>
export default {
  data() {
    return {
      flag: true,
      type: "A",
    };
  },
};
</script>

---

v-show

条件性展示元素选项 v-show 指令,这个指令用于设置display属性,即是否展示,注意到哪怕设置为了false,这个元素在源码中仍然有的.但是我们的v-if如果是假的就直接没有了.
IfDemo.vue

<template>
  <br />
  <h3>条件渲染</h3>
  <br />
  <div v-if="flag === true">flag:true</div>
  <div v-else>flag:false</div>
  <br />
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>not A B C</div>

  <div v-show="flag === true">是否显示我?</div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      type: "A",
    };
  },
};
</script>

---

v-show 与 v-if 的区别,性能分析

• 在网页初始化加载的时候:
  无论 v-show的值如何,元素都会被加载,但是v-if的值为false就直接不会在源码中出现,这使得v-show在初始化的时候消耗的性能大于v-if.v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。否则你无法在源码中看到v-if.
• 在进行显示与隐藏切换的时候:
  无论v-show的值如何,元素都已经被加载了,只是是否显示的问题,切换的资源少,但是v-if 是“真正”的条件渲染,v-if的机制是每次出现和消失都要重新，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

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

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---