vue实现标题导航,tab选项卡(一看就会)
Vue 实现 导航 标题 tab 选项卡 一看
2023-09-11 14:21:46 时间
效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title></title>
<style>
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: 99%;
line-height: 100px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div id="app" >
<ul class="tab-tilte">
<li v-for="(t,index) in tabTitle" @click="tab(index)" :class="t.check?'active':''">{{t.name}}</li>
</ul>
<div class="tab-content">
<div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
tabTitle: [{name:'标题一',check:true}, {name:'标题二',check:false}, {name:'标题三',check:false}, {name:'标题四',check:false}],
tabMain: ['这是内容一', '这是内容二', '这是内容三', '这是内容四'],
cur: 0 //默认选中第一个tab
},
methods:{
tab:function(index){
this.cur=index;//根据传入的index设置到cur,cur是控制显示哪个content
var tabTitle= this.tabTitle;
for(var i=0;i<tabTitle.length;i++){
var tab = tabTitle[i];
if(index===i){//当前点击的选中
tab.check=true;
}else{//其他的不选中
tab.check=false;
}
}
}
}
})
</script>
</html>
相关文章
- vue和mint-ui loadMore 实现上拉加载和下拉刷新
- Vue - 定义使用组件
- vue状态管理模式之vuex
- cordova + vue 项目实现极光推送功能
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
- 2-前端vue
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
- [Vue] Get up and running with vue-router
- vue 3.2.6:用better-scroll实现上拉加载/下拉刷新/滚动翻页(better-scroll@2.4.2)
- vue-tree 增删改查
- vue - chunk-vendors.js文件太大,实现拆分打包的具体配置
- Vue基于$attrs及$listeners实现隔代通信
- Vue项目中使用继承extends实现复用代码
- Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
- vue加百度统计代码(亲测有效)
- Vue中vue-i18n结合element-ui实现国际化
- 113:vue+openlayers 动态添加layer到layerGroup,并动态删除( 示例代码 )
- 044:vue+openlayers利用canvas clip 实现上卷帘功能(代码示例)
- vue框架中,图片应该保存在哪里?应该如何访问?
- 【vue】vue中如何实现组件封装、组件化开发及组件间传参_08
- vue项目实现轮询定时器-关闭定时器(整理)
- 前端必备技能知识:JS导出Blob流文件为Excel表格、Vue.js使用Blob的方式实现excel表格的下载(流文件下载)
- 基于Java+SpringBoot+Vue前后端分离小区管理系统设计与实现
- Vue实现简易备忘录
- vue第十天