资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用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
 
 
 



 
  
  
 
 
  
  
 
 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://cdkjz.cn/article/jojiid.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220