vue，按钮控制div显示与隐藏

不懂语法，写法粗糙，用作个人小记。

需求原因，展示的按钮分开，会更利于操作。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试</title><script src="./public/js/vue.js"></script></head><body><div id="app"><div v-show="conShow">君不见高堂明镜悲白发，朝如青丝暮成雪。</div><button @click="click1" v-show="conShow2">收起</button><button @click="click1" v-show="conShow3">展示</button></div></body><script type="text/javascript">new Vue({el: '#app',data() {return {conShow:true,conShow2:true,conShow3:false,}},methods:{click1(){this.conShow = !this.conShow;this.conShow2 = !this.conShow2;this.conShow3 = !this.conShow3;},}});</script>
</html>

测试效果：

项目效果：

vue，按钮控制div显示与隐藏相关推荐

css控制div显示／隐藏方法及２种方法比较原码[转]
CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错. 谈们的属性分别如下: di ...
jquery实现控制div显示跟隐藏办法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#id").hide ...
通过select下拉框里的value控制div显示与隐藏
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
Bootstrap—点击按钮控制div隐藏和显示的切换（图文详情）
Bootstrap-点击按钮控制div隐藏和显示的切换第一步:bootstrap有一个open类用来控制隐藏和显示,动态获取open是true还是false,并且点击按钮让toggle的true和f ...
Vue子组件的显示与隐藏
文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2 第二步父子组件传参 2.1 父组件 2.2 子组件 Vue子组件的显示与隐藏在使用Vue开发前端页 ...
前端：JS/29/实例:控制div显示_滚动的图片
实例:控制div显示_滚动的图片 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
html点击展开盒子变大,JS实现点击按钮控制Div变宽、增高及调整背景色的方法
本文实例讲述了JS实现点击按钮控制Div变宽.增高及调整背景色的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript实现点击按钮后改变DiV的高度.宽度和背景色等,点击对应按钮,Div ...
点击按钮控制div隐藏和显示
要求:有一个按钮,点击按钮使得div消失,之后将按钮文字改变为显示,再次点击按钮使得div出现,依次类推.效果如下图方法一引入vue <html><head>< ...

vue，按钮控制div显示与隐藏

vue，按钮控制div显示与隐藏相关推荐

最新文章

热门文章