运用v-if 或者v-show实现首页、新闻和个人中心按钮的切换
效果：点击首页按钮，显示首页对应内容；
点击新闻按钮，显示新闻对应内容；
点击个人中心，显示个人中心内容
v-if实现代码如下
形式1:设置一个函数根据设置的id值实现切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="tab==1">首页</div>
<div v-else-if="tab==2">新闻</div>
<div v-else>个人中心</div>
<button @click="tabChange" data-id="1">首页</button>
<button @click="tabChange" data-id="2">新闻</button>
<button @click="tabChange" data-id="3">个人中心</button>
</div>
<script>
new Vue({
el:'#root',
data:{
tab:1,//默认值1，对应首页
},
methods:{
tabChange:function (e) {
//获取data-id
this.tab =e.target.dataset.id
},
}
})
</script>
</body>
</html>
形式二：设置三个函数，分别对三个按钮实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="tab==1">首页</div>
<div v-else-if="tab==2">新闻</div>
<div v-else>个人中心</div>
<button @click="tab1">首页</button>
<button @click="tab2">新闻</button>
<button @click="tab3">个人中心</button>
</div>
<script>
new Vue({
el:'#root',
data:{
tab:1//默认1，对应首页
},
methods:{
tab1:function () {
this.tab=1
},
tab2:function () {
this.tab=2
},
tab3:function () {
this.tab=3
},
}
})
</script>
</body>
</html>
6573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
