本文通过两个完整的Vue.js代码实例，详细讲解了如何利用点击按钮切换页面显示内容。第一个示例演示了通过布尔标志位flag控制单位（元/吨与元/方）的切换显示；第二个示例展示了登录类型在用户名与邮箱之间的切换逻辑。代码包含HTML结构、Vue实例绑定及事件处理方法，适用于各类需要点击改变显示状态的前端开发场景。
Vue点击切换改变内容实例
以下是具体的代码实现示例：
代码功能说明：通过点击切换按钮来动态改变页面显示的内容，例如在不同计量单位之间进行切换。这里使用一个布尔类型的变量flag作为开关状态，通过改变该变量的值来控制不同内容的显示与隐藏。这种模式同样适用于其他需要点击按钮来切换显示或隐藏内容的场景。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue点击切换改变内容</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</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>
<script type="text/javascript">
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 = "元/方"
}
}
}
})
</script>
</body>
</html> Vue点击按钮改变页面显示内容的方法
相关知识拓展：在Vue中实现点击按钮改变页面显示内容的常用方法
具体实现代码如下：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</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>
<script type="text/javascript">
var vm = new Vue({
el:'#one',
data:{
loginType : 'username'
},
methods:{
change:function(){
if(this.loginType=='username'){
this.loginType='email'
}
else{
this.loginType='username'
}
}
}
})
</script>
</body>
</html>
以上就是Vue.js点击切换按钮改变内容的完整实例讲解，希望能为开发者提供有效的参考。