vue-例3-8演示v-show与v-if.html

原创于 2023-04-23 10:30:04 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

Vue 专栏收录该内容

661 篇文章

订阅专栏

该示例展示了Vue.js中v-show和v-if指令的用法。v-show通过CSS的display属性切换元素的可见性，而v-if会实际地在DOM中切换元素。点击按钮可以切换seen状态，影响显示的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示v-show与v-if</title>
</head>
<body>
    <div id="app">
        <span v-show="computedSeen">
            v-show:用css display none来显示或隐藏。这不会修改dom
        </span>NO Show。
        <hr>
        <span v-if="seen">
            鼠标悬停几秒钟查看此动态绑定的提示信息！这会修改dom
        </span>
        <h1 v-else>No Seen</h1>
        <template v-if="seen">
            <h1>多标记if</h1>
            <p>段落1</p>
            <p>段落2</p>
        </template>
    </div>

    <button onclick="vm.seen = !vm.seen">单击切换</button>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                seen:true,
            },
            computed:{
                computedSeen:function () {
                    return !this.seen;
                }
            }
        });
    </script>
</body>
</html>