零基础学习Vue-最原始的tab切换
2020-09-13 本文已影响0人
望月成三人
- 前面学习了vue的基础写法，从此文章开始开始实践
- 直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>tab切换联系</title>
<style>
#app {width: 200px; height: 200px; background-color: aqua;}
</style>
</head>
<body>
<div id="app">
<div v-if="showContent=='detail'">
显示个人信息详情
</div>
<div v-if="showContent=='list1'">
显示列表1
</div>
<div v-if="showContent=='list2'">
显示列表2
</div>
<button @click="showFunc('detail')">个人信息</button>
<button @click="showFunc('list1')">列表1</button>
<button @click="showFunc('list2')">列表2</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
showContent: "detail", # 默认显示个人信息tab内容
},
methods:{
showFunc:function(el) {
# 根据事件传参改变showContent内容，结合v-if 判断内容展示
this.showContent = el
}
}
})
</script>
</body>
</html>
- 优化版本
<html>
<head>
<meta charset="utf-8" />
<title>tab切换联系</title>
<style>
#app {width: 200px; height: 200px; background-color: aqua;}
</style>
</head>
<body>
<div id="app">
<div v-if="showContent=='detail'">
个人信息详情
</div>
<div v-else-if="showContent=='list1'">
列表1
</div>
<div v-else>
列表2
</div>
<button @click="showFunc" data-id="detail" data-name="1">个人信息</button>
<button @click="showFunc" data-id="list1" data-name="2">列表1</button>
<button @click="showFunc" data-id="list2" data-name="3">列表2</button>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
showContent: "detail",
},
methods:{
showFunc:function(el) {
let dataId = el.target.dataset.id
//el.target.dataset 得到标签上的所有属性,值为:DOMStringMap {id: "list1", name: "2"}
//取某一个标签属性:el.target.dataset.name
console.log(el.target.dataset)
console.log(el.target.dataset.name)
this.showContent = dataId
}
}
})
</script>
</body>
</html>
