用Vue框架实现一个tab栏，切换不同的图片。

1.首先我们需要了解的是vue这个框架，它是一个渐进式的框架！2.vue2.0版本是2016年发布的！3.还有一大堆的指令这里我就不一一的给大家描述了，如果大家感兴趣的话，可以去vue的官方网站看看，Vue官网地址。4.现在我们直接进入正题，首先给大家看看这个tab切换栏的案例。1.说到tab栏切换，相信大家都知道是怎么一回事吧，就是切换点击上面的选项卡，下面的图片也跟着切换。2.tab栏的切换可

小小猿同学

3462人浏览 · 2021-11-28 22:03:06

小小猿同学 · 2021-11-28 22:03:06 发布

1.首先我们需要了解的是vue这个框架，它是一个渐进式的框架！

2.vue2.0版本是2016年发布的！

3.还有一大堆的指令这里我就不一一的给大家描述了，如果大家感兴趣的话，可以去vue的官方网站看看，Vue官网地址。

4.现在我们直接进入正题，首先给大家看看这个tab切换栏的案例。

1.说到tab栏切换，相信大家都知道是怎么一回事吧，就是切换点击上面的选项卡，下面的图片也跟着切换。

2.tab栏的切换可以用原生JS去实现，也可以通过jQuery实现。但是今天我要使用vue去实现它，我觉得无论是使用原生JS还是jquery，都会去操作DOM元素。而操作DOM不利于JavaScript性能的优化。

5.我们项目中需要使用vue，因此我们需要先引入vue.js。这个大家可以去官网上下载！现在给大家看看我引入vue的模板。

6.现在正式开始，书写tab栏切换的代码！给大家看看我写的源码

<!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>
    <script src="./vue.js"></script>
    <style>
        #app {
            width: 1250px;
            text-align: center;
        }

        div img {
            width: 600px;
            height: 400px;
        }

        .tab {
            width: 600px;
            height: 50px;
            margin: 0 auto;
        }

        ul {
            padding: 0;
        }

        ul li {
            list-style-type: none;
            float: left;
            width: 198px;
            height: 50px;
            text-align: center;
            font-size: 30px;
            border: 1px solid;
            /* background-color: aqua; */
        }
        .active{
            background-color: plum;
        }
        img {
            display: none;
        }
        .current {
            margin: 0 auto;
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tab">
            <ul>
                <li @click ='change(index)' :key='item.id' :class ='index == currentIndex ? "active":""' v-for='(item,index) in list'>{{item.title}}</li>
            </ul>
        </div>
        <div :key='item.id' v-for='(item,index) in list'>
            <img :src='item.path' :class ='index == currentIndex ? "current":""'>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                currentIndex: 0,
                list: [{
                    id: 1,
                    title: 'one',
                    path: 'img/1.jpg'
                }, {
                    id: 2,
                    title: 'two',
                    path: 'img/2.jpg'
                }, {
                    id: 3,
                    title: 'three',
                    path: 'img/3.jpg'
                }]
            },
            methods:{
                change(index){
                    this.currentIndex = index
                }
            }
        })
    </script>
</body>

</html>

大家可以看到其实我写的结构代码非常的少，主要是使用了大量的vue的指令去操作data里面的数据，将数据渲染到页面上面。大家如果看不懂指令的操作，可以去官网上看看相关指令的作用。

我觉得这个tab栏切换的关键是定义了一个currentIndex，通过和循环遍历中的index比较，从而去给对应的元素添加相应类名。这样就可以给对应的选项卡添加背景色，以及显示对应的图片。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^