代码实例：

代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。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

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点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。