vue的显示与隐藏
其他
2020-03-21 12:28:01
阅读次数: 0
- <!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>
发布了21 篇原创文章 ·
获赞 3 ·
访问量 5万+
转载自blog.csdn.net/qq_40039641/article/details/79000215
