成都网站建设设计

将想法与焦点和您一起共享

使用Vue.js怎么实现点击切换按钮改变内容-创新互联

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

创新互联是一家集网站建设,二道江企业网站建设,二道江品牌网站建设,网站定制,二道江网站建设报价,网络营销,网络优化,二道江网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

代码描述:点击切换按钮,来改变显示的内容,切换不同的单位。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://chengdu.cdxwcx.cn/article/cepchg.html

其他资讯