vue实现点击隐藏与显示实例分享
如何使用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的挂载点。
js代码：
<script>
var app = new Vue({
el:"#app",
})
</script>
4、使用data创建一个show属性，设置默认值为true；
使用metheds创建一个点击事件（showCont），该事件处理当show值为true就修改给false，当show为false就修改为true。
代码：
data:{
show:true
},
methods:{
showCont:function(){
this.show = !this.show;
}
}
5、添加显示隐藏功能。在按钮标签上添加点击事件showCont，在按钮标签后的div标签上使用v-if添加show属性。
代码：
<button @click="showCont">点击隐藏再点显示</button>
<div v-if="show">hello world</div>
6、保存html代码，然后使用浏览器打开，点击按钮会发现按钮后面的文字隐藏了，再次点击按钮隐藏的内容又显示出来。
7、所有代码。可以直接复制所有代码，粘贴到新建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><所有代码。可以直接复制所有代码，粘贴到新建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:func
script>var app = new Vue({el:"#app",data:{show:true},methods:{showCont:function(){this.show = !this.show;}}})</script></body></html>
tion(){this.show = !this.show;}}})</script></body></html>
-
本文向大家介绍vue组件实现弹出框点击显示隐藏效果，包括了vue组件实现弹出框点击显示隐藏效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码，供大家参考，具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的，所以在一开始是隐藏的，这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候，操作执行完后当前页面
-
本文向大家介绍Vue隐藏显示、只读实例代码，包括了Vue隐藏显示、只读实例代码的使用技巧和注意事项，需要的朋友参考一下 1.Vue隐藏显示 •v-bind:class=”{hidden: isHidden }” 可动态设置vm.isHidden值 •:class=”{hidden: isHidden }” 简写 2.Vue控件只读 •v-bind:readonly=”isReadOnly” 可动态
-
本文向大家介绍js实现简易点击切换显示或隐藏，包括了js实现简易点击切换显示或隐藏的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码，供大家参考，具体内容如下 html: css: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery元素的隐藏与显示实例，包括了jQuery元素的隐藏与显示实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery元素的隐藏与显示的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery实现的点击显示隐藏下拉菜单功能完整示例，包括了jQuery实现的点击显示隐藏下拉菜单功能完整示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的点击显示隐藏下拉菜单功能。分享给大家供大家参考，具体如下： PS：感兴趣的朋友可以使用如下在线工具测试上述代码： 在线HTML/CSS/JavaScript前端代码调试运行工具： http://tools
-
本文向大家介绍vue实现密码显示隐藏切换功能，包括了vue实现密码显示隐藏切换功能的使用技巧和注意事项，需要的朋友参考一下 先给大家分享效果图： 具体实现代码如下所示： html： script： 注：带小眼睛的睁开闭合。 总结 以上所述是小编给大家介绍的vue实现密码显示隐藏切换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！