目录
在前文的项目基础上继续~
新建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