<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style type="text/css">
.active{
color: red
}
ul li{display: inline-block;padding: 0 20px}
.tabCon{border: 1px solid red; width: 300px; height: 200px}
</style>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item}}</li>
</ul>
<div class="tabCon">
<div v-for='(itemCon,index) in tabContents' v-show=" index == num">{{itemCon}}</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tabs: ["标题一", "标题二", "标题三"],
tabContents: ["内容一", "内容二", "内容三"],
num: 1
},
methods: {
tab(index) {
this.num = index;
}
}
});
</script>
</body>
</html>
vue tab切换
最新推荐文章于 2024-07-17 11:58:23 发布