<!DOCTYPE html>
<html >
<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>
<script src="./vue.js"></script>
<style>
.div {
background-color: #ccc;
height: 100px;
width: 100px;
float: left;
margin-left: 10px;
}
.active {
color: #f91;
}
</style>
</head>
<body>
<div >
<a
v-bind:class="[showTab.num == 1 ? 'active div' : 'div']"
href="http://www.baidu.com"
v-on:click="changeTab(1)"
>
关注
</a>
<a
v-bind:class="[showTab.num == 2 ? 'active div' : 'div']"
href="http://www.baidu.com"
v-on:click="changeTab(2)"
>
知识点
</a>
<a
v-bind:class="[showTab.num == 0 ? 'active div' : 'div']"
href="http://www.baidu.com"
v-on:click="changeTab(0)"
>
动态
</a>
</div>
<script>
const vm = new Vue({
// element
// 作用：指定页面中的哪块内容作为Vue的视图
el: '#app',
// 数据
data: {
showTab: {
num: 1
}
},
mounted() {
if (localStorage.getItem('tabNum')) {
console.log(1)
this.showTab.num = localStorage.getItem('tabNum')
}
},
methods: {
changeTab(data) {
this.$set(this.showTab, 'num', data)
localStorage.setItem('tabNum', data)
}
}
})
</script>
</body>
</html>