<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
ul{
list-style-type:none;
overflow: hidden;
}
ul li{
padding: 20px 30px;
flex-direction:row;
margin-left:10px;
display: inline-block;
background-color:#ccc;
}
ul li.active{
background-color: red;
}
</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list" :class="{active:index==curIndex}" @click="tab(index)">{{item.title}}</li>
</ul>
<div>
{{ list[curIndex].content }}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
curIndex:0,
list:[{
title:"标题1",
content:"内容1"
},{
title:"标题2",
content:"内容2"
},{
title:"标题3",
content:"内容3"
},{
title:"标题4",
content:"内容4"
}]
},
methods:{
tab:function (idx) {
// alert(idx)
this.curIndex = idx;
}
}
})
</script>
</html>
vue tab 切换
最新推荐文章于 2024-09-12 11:28:00 发布