如何用Vue实现点击隐藏显示分享功能的实例操作？

本文共计729个文字，预计阅读时间需要3分钟。

如何使用Vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选设置一个属性为true（show: true），然后使用v-if指令将show属性绑定到要显示或隐藏的内容的标签上。

如何使用vue进行按钮点击后指定区域内容隐藏，再次点击按钮隐藏内容显示。实现思路：首选需要设置一个属性为true(show:true)，然后使用v-if把show属性绑定到要显示与内容的标签身上，最后给点击按钮添加点击事件，当show属性为true就设置为false，为false就设置为true(this.show = !this.show)即可。

1、新建一个html页面，然后在这个代码页面上创建一个div标签id为app，然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。

代码：

<div id="app"> <button >点击隐藏再点显示</button> <div>hello world</div> </div>

2、引入vue.js。在body结束标签前面使用<sctipt>引入vue.js文件。

3、为vue创建挂载点。在vue.js引入文件后面新建一个<sctipt>标签，然后创建vue的挂载点。