vue.js如何实现单击改变内容

vue.js实现单击改变内容的方法：【new Vue({el:”#example”,data:{flag:true,btnText:’元/吨’,},methods:{showToggle:function(){this.flag …】。

本文操作环境：windows10系统、vue.js 2.9、thinkpad t480电脑。

我们要实现点击切换按钮，来改变显示的内容，切换不同的单位。

在下面的代码中flag相当于一个开关，通过控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。

具体实现代码：

立即学习“前端免费学习笔记（深入）”；

nbsp;html>                                       
       
                                                 new Vue({          el:"#example",          data:{             flag:true,//单位切换开关           btnText:'元/吨',        },          methods:{              showToggle:function(){                  this.flag = !this.flag                  if(this.flag==true){                      this.btnText = "元/吨"                  }else if(this.flag==false){                      this.btnText = "元/方"                  }             }          }      })          

登录后复制

推荐学习：php培训

以上就是vue.js如何实现单击改变内容的详细内容，更多请关注【创想鸟】其它相关文章！