标签:app fun 指令 利用 none javascrip round 添加 ges
<div id="app"> <ul class="tab-tilte"> <li>标题一</li> <li>标题二</li> <li>标题三</li> <li>标题四</li> </ul> <div class="tab-content"> <div>内容一</div> <div>内容二</div> <div>内容三</div> <div>内容四</div> </div> </div>
1.4 tab切换第二步写上对应的css样式
<style type="text/css"> ul li { margin: 0; padding: 0; list-style: none; } #app { width: 600px; height: 400px; margin: 0 auto; border: 1px solid #ccc; } .tab-tilte{ width: 90%; } .tab-tilte li{ float: left; width: 25%; padding: 10px 0; text-align: center; background-color:#f4f4f4; cursor: pointer; } /* 点击对应的标题添加对应的背景颜色 */ .tab-tilte .active{ background-color: #09f; color: #fff; } .tab-content div{ float: left; width: 25%; line-height: 100px; text-align: center; } </style>
1.5tab切换第三步引入vue实现
<body> <div id="app"> <ul class="tab-tilte"> <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> <li @click="cur=3" :class="{active:cur==3}">标题四</li> </ul> <div class="tab-content"> <div v-show="cur==0">内容一</div> <div v-show="cur==1">内容二</div> <div v-show="cur==2">内容三</div> <div v-show="cur==3">内容四</div> </div> </div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { cur:0 //默认选中第一个tab } }); </script> </body>
效果图:
(1) 以上代码看起来似乎很简单容易懂,而且效果也能实现,但不够灵活。我们可以发现如果标题和内容同时增多我们要不停的添加cur的索引值,因此我们有必要改进一下代码的写法。
(2)利用vue提供的v-for指令遍历得到索引和值 如下所示:
<div id="app"> <!-- 推荐这种写法--> <ul class="tab-tit"> <li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li> </ul> <div class="tab-content"> <div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div> </div> </div> <script type="text/javascript"> window.onload = function(){ var app = new Vue({ el:‘#app‘, data:{ tabTitle: [‘标题一‘, ‘标题二‘, ‘标题三‘, ‘标题四‘], tabMain: [‘内容一‘, ‘内容二‘, ‘内容三‘, ‘内容四‘], cur: 0 //默认选中第一个tab } }) } </script>
最终效果图如下:
标签:app fun 指令 利用 none javascrip round 添加 ges
原文地址:https://www.cnblogs.com/youmingkuang/p/11374408.html