第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<!--
需求1：button的高亮
改变 class 即可
思路：
1. vue 中一切都与数据相关。先去思考需要什么数据
当前是什么页面 - currentPage
2. 用 currentPage 这个数据与 button 元素的 class 绑定起来
3. 用 currentPage 来控制下面 div 的显示隐藏
-->
<div id="app">
<!--
active 是类名
-->
<button
:class="{ active: currentPage === 'home' }"
@click="currentPage = 'home'"
>
首页
</button>
<button
:class="{ active: currentPage === 'list' }"
@click="currentPage = 'list'"
>
列表页
</button>
<button
:class="{ active: currentPage === 'about' }"
@click="currentPage = 'about'"
>
关于页
</button>
<div v-show="currentPage === 'home'">
我是首页的内容
</div>
<div v-show="currentPage === 'list'">
我是列表页的内容
</div>
<div v-show="currentPage === 'about'">
我是关于页的内容
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
// 首页 - home
// 列表页 - list
// 关于页 - about
currentPage: "home",
},
});
</script>
</body>
</html>
第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3 v-if="tab==1">首页</h3>
<h3 v-else-if="tab==2">新闻</h3>
<h3 v-else>我的</h3>
<button @click="tabChange" data-id="1">首页</button>
<button @click="tabChange" data-id="2">新闻</button>
<button @click="tabChange" data-id="3">我的</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
tab: 1
},
methods:{
tabChange(e){
console.log(e.target.dataset.id);
let tabid=e.target.dataset.id;
// app.tab=tabid // 跟this.tab==tabid等同
this.tab=tabid
}
}
})
</script>
</body>
</html>
第三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
#box{
width: 600px;
height: 500px;
margin: 0px auto;
background: #cccccc;
/* flex-direction: row; */
position: relative;
overflow: hidden;
}
li{
width: 200px;
height: 100px;
background: blue;
text-align: center;
line-height: 100px;
float: left;/*浮动的元素不占有用位置*/
position: relative;
overflow: hidden;
}
#box div {
width: 600px;
height: 400px;
text-align: center;
line-height: 400px;
/* position: absolute; */
color: red;
}
.active{
background: #cccccc;
}
.dv{
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<div id="box" >
<!-- <li class="active">首页</li>
<li>列表页</li>
<li>关于页</li>
<div class="dv">首页的详情页</div>
<div>列表页的详情页</div>
<div>关于页的详情页</div> -->
<!--事件函数中可以传索引-->
<li v-for="(item,index) in arr" @click="fn1(index)" :class="{active:index===index1}">{{item}}{{index}}</li>
<!--这里的v-show显示的那个,如果当前点击的是那个,它就会把点击的那个显示出来-->
<div v-for="(items,indexs) in arrs" v-show="indexs==index1">{{items}}{{indexs}}</div>
</div>
<script>
/*
思考要改变的数据 (数据的变化)
定义一个要数据,后面可以改变
*/
new Vue({
el:'#box',
/*保存数据*/
data:{
arr:['首页','列表页','关于页'],
arrs:['首页的详情页','列表页的详情页','关于页的详情页'],
index1:0
},
methods:{
fn1(index){
this.index1=index;
}
}
})
</script>
</body>
</html>
