代码实例:
代码描述:点击切换按钮,来改变显示的内容,切换不同的单位。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 点击按钮改变页面显示内容的方法
如下所示:
titleusername
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点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。
希望与广大网友互动??
点此进行留言吧!