前言
与其他语言都一样，条件语句必不可少，vue中也是。本文将为介绍如何在Vue3中使用v-if和v-show指令实现条件渲染，v-if和v-show可以实现，在vue中改变条件，立即响应，可以用来控制元素的显示和隐藏，相比传统js简介很多。想要更多使用方式，可以到官网去查询。
v-if/v-show代码案例
首先，还是先来看一下v-if和v-show的语法结构：
v-if
- 语法:v-if="表达式"，表达式值为 true，显示;false，隐藏
- 其它:可以配合 v-else-if/v-else 进行链式调用条件判断
- 原理:基于条件判断，来控制创建或移除元素节点(条件渲染)
v-show
- 语法:v-show="表达式"，表达式值为 true，显示;false，隐藏
- 原理:基于CSS样式display来控制显示与隐藏
接下来直接展示代码部分
代码语言：javascript复制<!-- 步骤1 定义vue关联模块-->
<div id="app">
<div>
<p v-if="price > 0 && price <= 10">价格 <= 10</p>
<p v-else-if="price > 10 && price <= 20">价格 <= 20 </p>
<p v-else>价格其他</p>
<p v-show="price == 100">价格== 20</p>
</div>
</div>
<script type="module">
// 步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 步骤3 创建Vue实例，挂载到app div上
createApp({
// 步骤4 定义数据这些数据会跟上面绑定的div关联
data() {
return {
price: 19,
};
},
}).mount('#app')
</script>这段代码主要使用v-if、v-else-if和v-else指令实现了条件渲染，以及使用v-show指令控制元素的可见性，根据price数据属性的进而展示不同的语句。data中的price在实际开发中可以通过后台动态数据获取得到，而且也能够结合绑定事件改变price的值，进而影响条件语句。
接下来查看中结果，可以看到展示的是价格 <= 20，因为我们定义price:19。
总结
在本文中，我们介绍了如何在Vue3中使用v-if和v-show指令实现条件渲染。通过使用这些指令，可以轻松地根据数据的值来控制元素的显示和隐藏，从而提高开发效率。那么这两种有什么区别呢？
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！
