Vue.js 点击按钮显示/隐藏内容 实例

来源:互联网 发布:淘宝客产品推广合作 编辑:程序博客网 时间:2024/04/27 16:29

实例代码:

<!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.isShowif(this.isShow){this.btnText = "隐藏"}else{this.btnText = "显示"}}}})</script></body></html>