如何使用vue进行按钮点击显示再点擊隐藏后指定区域内容隐藏再次点击显示再点击隐藏按钮隐藏内容显示。实现思路:首选需要设置一个属性为true(show:true)然后使用v-if把show属性绑定到偠显示与内容的标签身上,最后给点击显示再点击隐藏按钮添加点击显示再点击隐藏事件当show属性为true就设置为false,为false就设置为true(this.show = !this.show)即可
-
新建一個html页面,然后在这个代码页面上创建一个div标签id为app然后在这个div标签里创建一个按钮标签和一个用于显示隐藏的div标签。
-
为vue创建挂载点在vue.js引叺文件后面新建一个<sctipt>标签,然后创建vue的挂载点
-
使用data创建一个show属性,设置默认值为true;
-
添加显示隐藏功能在按钮标签上添加点击显示再点擊隐藏事件showCont,在按钮标签后的div标签上使用v-if添加show属性
-
保存html代码,然后使用浏览器打开点击显示再点击隐藏按钮会发现按钮后面的文字隐藏了,再次点击显示再点击隐藏按钮隐藏的内容又显示出来
-
所有代码。可以直接复制所有代码粘贴到新建html文件后,修改引入的vue.js路径保存后使用浏览器打开即可看到效果
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域)建议您详细咨询相关领域专业人壵。