vue实现点击隐藏与显示实例分享-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

vue实现点击隐藏与显示实例分享-创新互联

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

创新互联提供成都做网站、成都网站制作、网页设计,成都品牌网站建设一元广告等致力于企业网站建设与公司网站制作,十载的网站开发和建站经验,助力企业信息化建设,成功案例突破上1000+,是您实现网站建设的好选择.

vue实现点击隐藏与显示实例分享 

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

代码:

hello world

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文标题:vue实现点击隐藏与显示实例分享-创新互联
文章路径:http://kswsj.cn/article/idodh.html

其他资讯