vue如何实现点击隐藏与显示
如何使用vue进行按钮点击后指定区域内容隐藏,再次点击按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true),然后使用v-if把show属性绑定到要显示与内容的标签身上,最后给点击按钮添加点击事件,当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可。
操作方法
- 01
新建一个html页面,然后在这个代码页面上创建一个div标签id为app,然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。 代码: <div id="app"> <button >点击隐藏再点显示</button> <div>hello world</div> </div>
- 02
引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。
- 03
为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后创建vue的挂载点。 js代码: <script> var app = new Vue({ el:"#app", }) </script>
- 04
使用data创建一个show属性,设置默认值为true; 使用metheds创建一个点击事件(showCont),该事件处理当show值为true就修改给false,当show为false就修改为true。 代码: data:{ show:true }, methods:{ showCont:function(){ this.show = !this.show; } }
- 05
添加显示隐藏功能。在按钮标签上添加点击事件showCont,在按钮标签后的div标签上使用v-if添加show属性。 代码: <button @click="showCont">点击隐藏再点显示</button> <div v-if="show">hello world</div>
- 06
保存html代码,然后使用浏览器打开,点击按钮会发现按钮后面的文字隐藏了,再次点击按钮隐藏的内容又显示出来。
- 07
所有代码。可以直接复制所有代码,粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果。 <!DOCTYPE html> <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>