Vue2基础——Tap栏切换案例
Posted 小hu同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2基础——Tap栏切换案例相关的知识，希望对你有一定的参考价值。
本篇文章需要有一丢丢的Vue基础 ，或者可以参考Vue官网，本篇文章会用到的知识点有
v-on,v-bind,v-if,v-for
运行的时候 需要引入Vue.js文件
业务需求：
- 点击tab 栏内容去切换相对应的显示内容
- 比如：点击栏目一 内容区域显示栏目一 内容一
可以自己先敲一下，想想该怎么实现这个业务需求呢？
下面我会提供静态代码，只需要在这个基础上进行修改即可
我也会在文章的最后，写一遍demo
html静态代码
<div id="app" class="vertical-tab">
<!-- 左侧tab栏 -->
<ul class="nav nav-tabs1">
<li class="active"><a href="#"> Section 1 </a></li>
<li class=""><a href="#"> Section 2 </a></li>
<li class=""><a href="#"> Section 3 </a></li>
</ul>
<!-- 内容区域 -->
<div class="tab-content tabs">
<div class="tab-pane fade active">
<h3>Section 1</h3>
<p>content1</p>
</div>
<div class="tab-pane fade">
<h3>Section 2</h3>
<p>content2</p>
</div>
<div class="tab-pane fade">
<h3>Section 3</h3>
<p>content3</p>
</div>
<div class="tab-pane fade">
<h3>Section 4</h3>
<p>content4</p>
</div>
<div class="tab-pane fade">
<h3>Section 5</h3>
<p>content5</p>
</div>
<div class="tab-pane fade">
<h3>Section 6</h3>
<p>content6</p>
</div>
</div>
<ul class="nav nav-tabs2">
<!-- 右侧tab栏 -->
<li class=""><a href="#"> Section 4 </a></li>
<li class=""><a href="#"> Section 5 </a></li>
<li class=""><a href="#"> Section 6 </a></li>
</ul>
</div>
CSS代码
<style>
* {
margin: 0;
padding: 0;
}
.vertical-tab {
width: 920px;
margin: 100px auto;
}
.vertical-tab .nav {
list-style: none;
width: 200px;
}
.vertical-tab .nav-tabs1 {
border-right: 3px solid #e7e7e7;
}
.vertical-tab .nav-tabs2 {
border-left: 3px solid #e7e7e7;
}
.vertical-tab .nav a {
display: block;
font-size: 18px;
font-weight: 700;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 20px;
margin: 0 0 1px 0;
text-decoration: none;
}
.vertical-tab .tab-content {
color: #555;
background-color: #fff;
font-size: 15px;
letter-spacing: 1px;
line-height: 23px;
padding: 10px 15px 10px 25px;
display: table-cell;
position: relative;
}
.vertical-tab .nav-tabs1 {
float: left;
}
.vertical-tab .tabs {
width: 500px;
box-sizing: border-box;
float: left;
}
.vertical-tab .tab-content h3 {
font-weight: 600;
text-transform: uppercase;
margin: 0 0 5px 0;
}
.vertical-tab .nav-tabs2 {
float: right;
}
.tab-content .tab-pane {
display: none;
}
.tab-content .tab-pane.active {
display: block;
}
</style>
data数据
list: [{
id: 1,
title: '栏目一',
content: '内容一'
}, {
id: 2,
title: '栏目二',
content: '内容二'
}, {
id: 3,
title: '栏目三',
content: '内容三'
}, {
id: 4,
title: '栏目四',
content: '内容四'
}, {
id: 5,
title: '栏目五',
content: '内容五'
}, {
id: 6,
title: '栏目六',
content: '内容六'
}]
Demo示例
思路：
- 首先循环数据，将数据渲染到页面
- 给tab栏 绑定事件，实现类名active的切换
- 拿到当前点击的索引，让对应的内容显示出来
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--这个地方吧css样式代码copy过来就可以了 -->
<!-- 我这里为了代码的可读性 就不复制了-->
</head>
<div id="app" class="vertical-tab">
<!-- 左侧tab栏 -->
<ul class="nav nav-tabs1">
<!--第一步、渲染数据 使用v-for循环这个li标签
使用v-for 去循环 数据list，item 这个是自定义的，index是索引。然后使用{{item.title}}
-->
<!--
第二步 要判断左边和右边的数据，123 到左边 456 到右边
需要使用v-if 来判断 当前的索引值
-->
<!--
第三步
绑定一个active类名，并且判断当前索引值 显示类名
:class = "curIndex == index?"active":"""
使用三元运算符 判断这个curINdex 和index 的索引是否相等 相等就使用active 类名
-->
<!--
第四步
添加点击事件 v-on实现tap切换
-->
<li v-on:click="handel(index,0)" :calss = "curIndex == index?"active":"" " v-for = "(item,index) in list" v-if="index < list.index/2"><a href="#"> {{item.title}} </a></li>
</ul>
<!-- 内容区域 -->
<div class="tab-content tabs">
<!--第二步、渲染内容 使用v-for循环这个li标签
使用v-for 去循环 数据list，item 这个是自定义的，index是索引。然后使用{{item.title}}
-->
<div class="tab-pane fade active"
:calss = "curIndex == index?"active":"" " v-for = "(item,index) in list">
<h3>{{item.title}}</h3>
<p>{{item.content}}</p>
</div>
</div>
<ul class="nav nav-tabs2">
<!-- 右侧tab栏 -->
<!--循环右侧数据 并且渲染
-->
<li v-on:click="handel(index,1)" :calss = "curIndex == index?"active":"" " v-for = "(item,index) in list">
<a href="#"> {{item.title}} </a></li>
</ul>
</div>
<!--这里的vue.js文件需要到官网去下载，并且引入 -->
<!--否则无法执行vue -->
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
//这里的el,就是获取到上面盒子的id值为app的值
el:"#app",
//data 为数据源
data:{
curIndex:0,//当前选项的索引
list: [{
id: 1,
title: '栏目一',
content: '内容一'
}, {
id: 2,
title: '栏目二',
content: '内容二'
}, {
id: 3,
title: '栏目三',
content: '内容三'
}, {
id: 4,
title: '栏目四',
content: '内容四'
}, {
id: 5,
title: '栏目五',
content: '内容五'
}, {
id: 6,
title: '栏目六',
content: '内容六'
}]
},
methods:{
//添加点击事件
//传递参数，index,和自定义属性
handel:function(index,flag){
if(flag){
this.curIndex = index;
}else{
this.curIndes = index;
}
}
}
})
</script>
</body>
</html>
以上是关于Vue2基础——Tap栏切换案例的主要内容，如果未能解决你的问题，请参考以下文章