Vue -- v-if

最新推荐文章于 2024-07-19 10:04:44 发布

小王的进阶之路

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量132

点赞数

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43712409/article/details/119711885

版权

前端同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

本文介绍了 Vue 中的条件渲染指令 v-if 和 v-show，强调它们在控制元素显示状态上的作用。v-if 根据表达式真值决定是否在 DOM 中保留元素，而 v-show 则简单地切换 CSS 的 `display` 属性。文中通过示例代码展示了如何使用 v-if 和 v-show，并指出频繁切换时 v-show 的优势。此外，还包含一个交互式的按钮切换示例，用于演示这两个指令的工作原理。

摘要由CSDN通过智能技术生成

v-if 指令的作用是：根据表达式的真假切换元素的显示状态
本质是通过操纵 DOM 元素来切换显示状态
表达式的值为 true，元素存在于 DOM 树中，为 false，从 DOM 树中移除
频繁的切换用 v-show，反之使用 v-if，前者的切换消耗小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">是否显示</p>
        <p v-if="isShow">是否显示 v-show</p>
        <h2 v-if="tem>=35">大于等于35时显示</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                tem: 40
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>