用Vue.js实现简单的tab选项卡

最新推荐文章于 2024-04-11 11:03:20 发布

jackzcq~

最新推荐文章于 2024-04-11 11:03:20 发布

阅读量1k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_49378268/article/details/121436675

版权

前提：你对vue.js的一些指令和基本语法有一定的了解

基本思路：

,用v-for遍历data里的数据渲染到页面达到创建三个选项卡，三个图片的渲染，建立好结构
将三个选项卡用v-on绑定点击事件，v-bind绑定对应的类操纵图片的隐藏和显示还有tabx选项卡的高亮

<!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>


       li {
           width: 200px;
           height: 80px;
           line-height: 80px;
           text-align: center;
           float: left;
           border: 1px solid red;
           font-size: 50px;
           list-style: none;
       }
       .active {
           color: red;
           background-color: orange;
       }

       img {
           display: none;
           
       }
       .activeImg {
           display: block;
       }

   </style>

</head>

<body>
    <div id='app'>
   <ul>
       <li v-for='(item,index) in list' :key='index' 
        :class="index==currentIndex  ? 'active':''"
        @click='changeIndex(index)'
        >
          <span>  {{item.title}}</span> 
       
       </li>

   
        <img  
        v-for='(item,index) in list' :key='index' 
         v-bind:src="item.path" alt="" 
         :class="index==currentIndex  ? 'activeImg':''">
     
   </ul>


    </div>
    <script>
        new Vue({
            el: '#app',
            data: {

                currentIndex:0,

                list: [{
                    id: 1,
                    title: 'apple',
                    path: 'img/apple.png'
                }, {
                    id: 2,
                    title: 'orange',                                                                            
                    path: 'img/orange.png'
                }, {
                    id: 3,
                    title: 'lemon',
                    path: 'img/lemon.png'
                }]
            },
            methods:{
                changeIndex(i) {
                    this.currentIndex=i

                }
            }
        })
    </script>
</body>

</html>

样式就别在意了，后期自己去改样式

jackzcq~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用Vue.js实现简单的tab选项卡

前提：你对vue.js的一些指令和基本语法有一定的了解基本思路：,用v-for遍历data里的数据渲染到页面达到创建三个选项卡，三个图片的渲染，建立好结构将三个选项卡用v-on绑定点击事件，v-bind绑定对应的类操纵图片的隐藏和显示还有tabx选项卡的高亮<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta http-equiv='
复制链接

扫一扫