VUE3快速入门——条件渲染v-if/v-show

前言

与其他语言都一样，条件语句必不可少，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来控制显示与隐藏

接下来直接展示代码部分

<!-- 步骤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腾讯技术创作特训营最新征文，快来和我瓜分大奖！