vue的v-show指令

3月

本文最后更新于2020年03月17日，已经过了1767天没有更新，若内容或图片失效，请留言反馈

v-show的用法和v-if非常相似，也是用于决定一个元素是否渲染。

v-show和v-if的对比

v-if是创建或销毁元素，表达式为false时，在DOM上销毁元素
v-show是显示或隐藏元素，表达式为false时，为元素添加一个dispolay:none的内联样式，将元素隐藏。

如何选择

要在显示与隐藏之间频繁切换时用v-show
只有一次切换时使用v-if

案列

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p v-show="flag">我显示了</p>
        <button @click="toggle">{{message}}</button>
    </div>
        
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        const app = new Vue({
            el:"#app",
            data:{
                message:"隐藏",
                flag:true
            },
            methods:{
                toggle(){
                    this.flag = !this.flag;
                    if(this.flag === true){
                        this.message = "隐藏";
                    }else{
                        this.message = "显示";
                    }
                }
            }
        })
    </script>
</body>
</html>

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢