v-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">
    <title>蜀云泉</title>
    
    <script type="text/javascript" src="../lib/vue-2.6.10.js"></script>

</head>
<body>
    
    <!-- 这个div就是MVVM中的V，View -->
    <div id="app">

        <input type="button" value="点我" @click="flag=!flag">
 
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>

    </div>


    <script>
        // 这个vm就是MVVM中的VM，ViewModel
        var vm=new Vue({
         el: '#app',
        //  这个data就是MVVM中的M，Model
         data: {
             flag:true
         },
         methods: {
         }  

        })

    </script>

</body>
</html>

效果图：点击按钮，下面的会消失，再点击会出现