代码实例：
代码描述：点击切换按钮，来改变显示的内容，切换不同的单位。flag相当于一个开关，控制开关的改变，来切换不同的单位。同样适用于其他的切换内容实例，也可设置按钮点击显示隐藏等。
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
< >vue点击切换改变内容</ >
< src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></ >
</head>
<body>
<Col span="2" style="text-align: center;">
<p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==true'></p>
<p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==false'></p>
</Col>
<Col span='2'>
<span @click='switchChange'>
<Icon type="arrow-swap" class='contractadd_icon'></Icon>
</span>
</Col>
< type="text/ ">
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 = "元/方"
}
}
}
})
</ >
</body>
</html>
拓展知识：vue 点击按钮改变页面显示内容的方法
如下所示：
<!DOCTYPE html>
<html lang="en" ns:v-bind="http://www.w3.org/1999/xhtml" ns:v-on="http://www.w3.org/1999/xhtml">
<head>
< charset="UTF-8">
< > </ >
< src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></ >
< src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></ >
< src="https://cdn.jsdelivr.net/npm/vue"></ >
</head>
<body>
<div id="one">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="change">change</button>
</div>
< type="text/ ">
var vm = new Vue({
el:'#one',
data:{
loginType : 'username'
},
methods:{
change:function(){
if(this.loginType=='username'){
this.loginType='email'
}
else{
this.loginType='username'
}
}
}
})
</ >
</body>
</html>
以上这篇Vue.js点击切换按钮改变内容的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
为什么Flink会成为下一代大数据处理框架的标准?
2026-05-18栏目： 教程
-
微服务架构：从事务脚本到领域模型
2026-05-18栏目： 教程
-
微服务架构到底是什么鬼？
2026-05-18栏目： 教程
-
Linux系统安全之Rootkit原理解析与检测实践
2026-05-18栏目： 教程
-
贯彻10项原则，构建Linux系统安全体系
2026-05-18栏目： 教程