vue笔记-v-if和v-show指令学习（六）

作者: Hush____ | 来源:发表于2019-10-28 20:22 被阅读0次

v-if 是每次都会删除或者创建元素
v-show 是只是切换了元素的display:none属性

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            
            <input type="button" value="toggle" @click="toggle"/>
            
            <h1 v-if="flag">这个是通过v-if控制的元素</h1>
            <h1 v-show="flag">这个是通过v-show控制的元素</h1>
            
        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    flag: true
                },
                methods:{
                    toggle(){
                        this.flag = !this.flag;
                    }
                }
            })
        </script>
    </body>
</html>