Vue
/
0.19v-if和v-show.html

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

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

<body>
    <div class="app">
        <input type="button" value="变变变" @click='flag=!flag'>
        <!-- v-if：每次都会重新删除或创建元素 -->
        <!-- v-show：每次不会重新进行dom的删除和创建操作，只是切换了元素的display:none样式 -->
        <!-- v-if：比较高的切换性能消耗 -->
        <!-- v-show：有较高的初始渲染消耗 -->

        <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
        <!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
        <p v-if='flag'>233333</p>
        <p v-show='flag'>雷憨憨</p>
    </div>

    <script src="./node_modules/_vue@2.5.22@vue/dist/vue.js"></script>
    <script>
        var a = new Vue({
            //el指向需要控制的元素
            el: '.app',
            //data 存放数据;
            data: {
                flag: true,
            }
        })
    </script>
</body>

</html>