1、新建一个html页面，然后在这个代码页面上创建一个div标签id为app，然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。代码：<div id="app"> <button >点击隐藏再点显示</button> <div>hello world</div> </div>
3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签，然后创建vue的挂载点。js代码：<script> var app = new Vue({ el:"#app", }) </script>
5、添加显示隐藏功能。在按钮标签上添加点击事件showCont，在按钮标签后的div标签上使用v-if添加show属性。代码： <button @click="showCont">点击隐藏再点显示</button> <div v-if="show">hello world</div>
7、所有代码。可以直接复制所有代码，粘贴到新建html文件后，修改引入的vue.js路径保存后使用浏览器打开即可看到效果。<!DOCTYPE ht罪焐芡拂ml><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <button @click="showCont">点击隐藏再点显示</button> <div v-if="show">hello world</div> </div> <script type="text/javascript" src="js/vue.js" ></script> <script> var app = new Vue({ el:"#app", data:{ show:true }, methods:{ showCont:function(){ this.show = !this.show; } } }) </script> </body></html>
