1 <html lang="en">
 2 <head>
 3     <meta charset="UTF-8">
 4     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title>v-if 和v-show</title>
 7     <script src="../js/vue.js"></script>
 8 </head>
 9 <body>
10     <div id="app">
11     <!-- <input type="button" value="toggle" @click="click"> -->
12     <input type="button" value="toggle" @click="flag=!flag">
13     <!-- v-if 每次都是重新删除或者创建元素 ,性能切换消耗较高-->
14     <!-- v-show 不会重新进行Dom操作删除 ---只是在切换了display:none ,有初始的较高渲染消耗 -->
15      <p v-if="flag">我是一只猫</p>
16      <p v-show="flag">我是一条鱼</p>
17 
18     </div>
19     <script>
20     var vm =new Vue({
21         el:'#app',
22         data:{
23         flag:true
24         },
25         methods:{
26             click(){
27                 this.flag =!this.flag
28             }
29         }
30     })
31     </script>
32     
33 </body>
34 </html>