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示例
思路:

  1. 首先循环数据,将数据渲染到页面
  2. 给tab栏 绑定事件,实现类名active的切换
  3. 拿到当前点击的索引,让对应的内容显示出来

完整代码

<!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栏切换案例的主要内容,如果未能解决你的问题,请参考以下文章

使用底部导航栏防止片段刷新

JavaScript+css+html之菜单栏切换

vue2.0 代码功能片段

如何在切换片段时停止 AsyncTask?

vue2.x + vux采坑总结

小程序--导航栏切换(tab切换)