08v-show和v-if指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>v-text,v-html指令</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--v-if 和 v-show都可以动态去控制元素的显示与隐藏 v-show：使用display进行隐藏或者显示 有较高的渲染性能消耗 v-if：每次的都进行元素的创建和删除 有较高的切换性能消耗 v-if可以用作不给用户看的数据使用 --> <div v-show="content1">我是内容一</div> <button @click="controller1">控制内容一</button> <div v-if="content2">我是内容二</div> <button @click="controller2">控制内容二</button> </div> <script> var vm = new Vue({ el: '#app', data: { content1:true, content2:true },methods: { controller1(){ this.content1=!this.content1; }, controller2(){ this.content2=!this.content2; } }, }) </script> </body> </html>
所需依赖：npm i vue
源码：http://files.cnblogs.com/files/sansui/08v-show%E5%92%8Cv-if%E6%8C%87%E4%BB%A4.zip
浙公网安备 33010602011771号