Vue实现选项卡demo
<!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![en...
·
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<style>
li{ list-style-type: none; display: inline-block; margin-right: 0.5rem; }
.normal{ color: green; }
.active{ color: red; }
.always{display: none;}
.change{display: block;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="myTab">
<ul >
<li class="normal" v-for="(item,index) in items" :key="item.id" :class="{'active':isActive==index}" @click="change(index)">
{{item}}
</li>
</ul>
<ol >
<li v-for="(item,index) in content" :key="item.id" class="always" :class="{'change':isActive==index}">{{item}}</li>
</ol>
</div>
</body>
<script>
new Vue({
el: ".myTab",
data: {
items: [
'选项卡一',
'选项卡二',
'选项卡三'
],
content:[
"内容一",
"内容二",
"内容三"
],
isActive: 0 //索引值默认为0,即item1为默认激活的选项卡
},
methods: {
change: function (index) {
this.isActive = index;
}
}
})
</script>
</html>
更多推荐
已为社区贡献7条内容
所有评论(0)