64 lines
1.6 KiB
HTML
64 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
.title {
|
|
color: red;
|
|
}
|
|
.content li {
|
|
display: none;
|
|
}
|
|
.content-active {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<ul>
|
|
<li v-for="(item,index) in tabs"
|
|
v-bind:class="index == currentIndex ? 'title' : ''"
|
|
@click="tabChange(index)">
|
|
{{ item.title }}</li>
|
|
</ul>
|
|
<ul class="content">
|
|
<li v-for="(item,index) in tabs" v-bind:class="index == currentIndex ? 'content-active' : ''">{{ item.content }}</li>
|
|
</ul>
|
|
<h2>{{dddd}}</h2>
|
|
<h3>{{dddd}}</h3>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el:'.header',
|
|
data: {
|
|
currentIndex: 0,
|
|
tabs: [
|
|
{ title: '社会', content: '社会的内容' },
|
|
{ title: '社会1', content: '社会的内容1' },
|
|
{ title: '社会2', content: '社会的内容2' },
|
|
]
|
|
},
|
|
methods:{
|
|
tabChange(i) {
|
|
this.currentIndex = i;
|
|
}
|
|
},
|
|
watch: {
|
|
currentIndex (newval,oldval) {
|
|
console.log("newval: ", newval)
|
|
console.log("oldval: ", oldval)
|
|
}
|
|
},
|
|
computed: {
|
|
dddd() {
|
|
console.log(11111)
|
|
return this.currentIndex
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
</html> |