利用Vue实现简易tab切换效果
时间:2022-07-24
本文章向大家介绍利用Vue实现简易tab切换效果,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了vue后,开始要写出一些简单的特效。
1.2 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的。
1.3 tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构
<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.6tab切换效果改进与优化
(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>
最终效果图如下:
- 3384/1750: [Usaco2004 Nov]Apple Catching 接苹果
- 1702: [Usaco2007 Mar]Gold Balanced Lineup 平衡的队列
- 1455: 罗马游戏
- SQL Server 高性能写入的一些总结
- 3389: [Usaco2004 Dec]Cleaning Shifts安排值班
- 1754: [Usaco2005 qua]Bull Math
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
- 3301: [USACO2011 Feb] Cow Line
- SQL Server 索引和表体系结构(包含列索引)
- TiDB 源码阅读系列文章(七)基于规则的优化
- 博弈论入门之nim游戏
- 1477: 青蛙的约会
- 2045: 双亲数
- 树莓派常用文本编辑器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 《深入浅出SQL》问答录(二)
- 《深入浅出SQL》问答录(四)
- 《深入浅出MySQL》问答录(五)
- 《深入浅出SQL》问答录(七)
- 《深入浅出SQL》问答录(八)
- Improvise_a_Jazz_Solo_with_an_LSTM_Network_v3a-2
- 《深入浅出SQL》问答录(九)
- 《深入浅出SQL》问答录(十)
- Operations_on_word_vectors_v2a
- LeetCode精选好题(一)
- LeetCode精选好题(二)
- 【leetcode两题选手】算法类题目(7.26)
- MySQL见闻录 -- 入门之旅(一)
- MySQL见闻录 -- 入门之旅(二)
- MySQL见闻录 - 入门之旅(三)