Vue学习笔记（十二、v-if 和 v-show）

最新推荐文章于 2025-02-26 14:40:15 发布

ttod_qzstudio

最新推荐文章于 2025-02-26 14:40:15 发布

阅读量240

点赞数 2

分类专栏： VUE 文章标签： vue.js 学习笔记

本文链接：https://blog.youkuaiyun.com/ttod/article/details/143189961

版权

VUE 专栏收录该内容

16 篇文章

订阅专栏

先看代码：

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

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="toggle">
        <p v-if="flag">使用v-if控制的段落</p>
        <p v-show="flag">使用v-show控制的段落</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag:"true"
            },
            methods: {
                toggle() {
                    this.flag = !this.flag
                }
            }
        });
    </script>
</body>

</html>

效果如下：

当按下toggle按钮的时候，能够控制两个段落的显示和隐藏。

同样是控制显示和隐藏，v-if 和 v-show 有什么区别呢？

这里 v-if 为 false 时，实际上是删除了该段落对象，当v-if 为true 时，实际上是重新生成了p段落对象。但是v-show仅仅是通过将p段落的style中的display设置实现段落的显示和隐藏，当把v-show设置为false时，其display为none，当v-show设置为true时，移除style风格中的display内容。