【前端学习日记】Vue中通过点击事件隐藏按钮和显示按钮

        我想要实现的场景是，有两个按钮，但页面上只显示一个按钮，另一个隐藏。通过点击按钮时触发事件，先前显示的按钮隐藏，而另一个按钮渲染出来进行其他的事件调用。

        如一下gif图所示效果。用到了Element-UI的按钮元素。

         有两种方法，效果类似：① 动态绑定Vue的class属性；② 动态绑定Vue的内联样式style属性；

        详情见文档：Class 与 Style 绑定 — Vue.js

        我的代码 ：只介绍第一种。

  编辑提交

data(){ return {isActive: false,  //设置按钮的初始显示，当布尔值为true时，对应的属性active生效，即隐藏isActive1: true,    //同上
}，
methods:{edit() {this.isActive = !this.isActive;  //当点击按钮触发事件时改变两个按钮的显示this.isActive1 = !this.isActive1;},}
}

.active {display: none;  // 隐藏
}
.active1 {display: none;   //隐藏
}

         初始时，第一个按钮的布尔值为false，所以不会隐藏，当点击按钮时，调用edit事件，届时布尔值取反，第一个按钮布尔值为true，第二个为false，所以第二个按钮显示，而第一个隐藏。

        这里由于我的第二个按钮有其他事件触发，所以没有单独写按钮事件，各位可以自行根据需要补齐。同第一个按钮样，点击第二个按钮时，取反布尔值即可实现显示和隐藏。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！