Vue.js 点击按钮显示/隐藏内容的实例代码
2018-02-08 09:24
1231 查看
实例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换显示隐藏</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="example"> <button v-text="btnText" @click="showToggle"></button> <p v-show="isShow">原本可以成为Google、Facebook的“爸爸”,或者微软的“儿子”,最后却像“孙子”一样被贱卖,沦为互联网浪潮的“弃子”。</p> </div> <script type="text/javascript"> new Vue({ el:"#example", data:{ btnText:"隐藏", isShow:true }, methods:{ showToggle:function(){ this.isShow = !this.isShow if(this.isShow){ this.btnText = "隐藏" }else{ this.btnText = "显示" } } } }) </script> </body> </html>
以上这篇Vue.js 点击按钮显示/隐藏内容的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue.js 点击按钮显示/隐藏内容 实例
- Vue.js点击切换按钮改变内容的实例讲解
- Vue.js点击切换按钮改变内容实例
- 一段JS代码,点击按钮显示一块区域,再点击则隐藏这块区域
- vue.js 左侧二级菜单显示与隐藏切换的实例代码
- JS/jQuery实现默认显示部分文字点击按钮显示全部内容
- JS实现点击参数面板按钮显示或隐藏数据
- JS实现点击参数面板按钮显示或隐藏数据
- 点击按钮显示隐藏内容
- 【js实例】js实现点击标题标签切换显示对应内容
- js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框
- 点击按钮显示和隐藏列表内容
- js/jq 点击按钮显示div,点击页面其他任何地方隐藏div
- JS实现点击参数面板按钮显示或隐藏数据
- 点击按钮时显示一个弹框,点击空白,弹框隐藏,也可操作弹框中的内容,也可使用弹框中的按钮关闭弹框
- vue与leaflet的结合使用,在popup上放置一个按钮,点击后使用amout挂载一个未挂载的实例,显示一些信息
- js实现点击展开隐藏效果(实例代码)
- 原生JS实现点击按钮显示更多内容
- vue.js加载新的内容(实例代码)
- vue 点击按钮改变页面显示内容