<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="shopcart.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
ul li{
list-style: none;
padding: 0;
margin: 0;
}
.tab-tit li{
padding:10px 15px;
text-align:center;
cursor: pointer;
float: left;
}
.tab-tit .active{
color:
border-bottom: 1px solid
}
.tab-con div{
margin: 30px;
}
</style>
</head>
<body>
<div id="root">
<!-- jquery实现tabs方法思路-->
<!--
给每个bottom绑定事件，当触发绑定事件时，显示对应的模块
-->
<ul class="tab-tit">
<li v-for="(item,index) in tabTitle" @click="getCur(index)" :class="{active:cur==index}">{{item}}</li>
<!-- <li @click="cur=0" :class="{active:cur==0}">标题一</li>
<li @click="cur=1" :class="{active:cur==1}">标题二</li>
<li @click="cur=2" :class="{active:cur==2}">标题三</li> -->
</ul>
<div class="tab-con">
<div v-for="(item,index) in tabContent" v-show="cur===index">{{item}}</div>
</div>
</div>
<script>
window.onload=function(){
new Vue({
el:"#root",
data:{
cur:0,
tabTitle:['标题一','标题二','标题三'],
tabContent:['内容1','内容2','内容3']
},
methods:{
getCur(index){
this.cur=index;
}
}
})
}
</script>
</body>
</html>
