使用Vue.js怎么实现点击切换按钮改变内容

今天就跟大家聊聊有关使用Vue.js怎么实现点击切换按钮改变内容，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

成都创新互联主要从事网页设计、PC网站建设（电脑版网站建设）、wap网站建设（手机版网站建设）、成都响应式网站建设公司、程序开发、网站优化、微网站、小程序定制开发等，凭借多年来在互联网的打拼，我们在互联网网站建设行业积累了丰富的成都网站建设、网站建设、网站设计、网络营销经验，集策划、开发、设计、营销、管理等多方位专业化运作于一体。

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

 
 
 
  
 vue点击切换改变内容 
  
 
 
 
  
  
 
 
  
    
  
 
  
 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 = "元/方" 
    } 
   } 
  } 
 })

拓展知识：vue 点击按钮改变页面显示内容的方法

如下所示：




 
 Title
 
 
 



 
  Username
  
 
 
  Email
  
 
 change

var vm = new Vue({ el:'#one', data:{ loginType : 'username' }, methods:{ change:function(){ if(this.loginType=='username'){ this.loginType='email' } else{ this.loginType='username' } } } })

看完上述内容，你们对使用Vue.js怎么实现点击切换按钮改变内容有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

新闻名称：使用Vue.js怎么实现点击切换按钮改变内容
文章出自：http://kswsj.cn/article/jojiid.html

关于创新互联

使用Vue.js怎么实现点击切换按钮改变内容

其他资讯