1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9.     <script src="./lib/vue.js"></script>
    10. </head>
    12. <body>
    13.     <div id="app">
    14.         <input type="button" @click="flag=!flag" value="隐藏">
    16.         <!-- v-if特点:每次都会重新删除元素或创建元素 -->
    17.         <!-- v-show特点:不会重新对dom的删除和创建,只是切换了样式display:none -->
    19.         <p v-if="flag">我是v-if的元素</p>
    20.         <p v-show="flag">我是v-show的元素</p>
    21.     </div>
    22.     <script>
    23.         var vm = new Vue({
    24.             el: '#app',
    25.             data: {
    26.                 flag: true
    27.             },
    28.             methods: {
    29.                 hidden() {
    30.                     this.flag = false
    31.                 }
    32.             }
    33.         });
    34.     </script>
    35. </body>
    37. </html>

    1.gif