[Vue.js] 基础 -- 案例之Tab选项卡

最新推荐文章于 2022-09-07 10:04:14 发布

^ω^奋斗小青年

最新推荐文章于 2022-09-07 10:04:14 发布

阅读量912

点赞数

分类专栏： Vue.js 文章标签： vue Tab选项卡

本文链接：https://blog.csdn.net/DeathDomain/article/details/109433292

版权

Vue.js 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

实现效果

实现步骤

实现静态UI效果
- 用传统的方式实现标签结构和样式
基于数据重构UI效果
- 将静态的结构和样式重构为基于Vue模板语法的形式
- 处理事件绑定和js控制逻辑
声明式编程
- 模板的结构和最终显示的效果基本一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }
        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }
        .tab ul li:first-child {
            border-left: 1px solid blue;
        }
        .tab ul li.active {
            background-color: orange;
        }
        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
            overflow: hidden;
        }
        .tab div.current {
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="tab">
        <ul>
            <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
        </ul>
        <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
            <!--      属性绑定      -->
            <img :src="item.path">
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            currentIndex: 0, // 选项卡当前的索引
            list: [{
                id: 1,
                title: '动漫--01',
                path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1430896917,3626279479&fm=26&gp=0.jpg'
            },{
                id: 2,
                title: '动漫--02',
                path: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3591372777,3342280201&fm=26&gp=0.jpg'
            },{
                id: 3,
                title: '动漫--03',
                path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1964875,4190908564&fm=26&gp=0.jpg'
            }]
        },
        methods: {
            change: function(index){
                // 在这里实现选项卡切换操作：本质就是操作类名
                // 如何操作类名？就是通过currentIndex
                this.currentIndex = index;
            }
        }
    });
</script>
</body>
</html>

^ω^奋斗小青年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Vue.js] 基础 -- 案例之Tab选项卡

实现效果 实现步骤实现静态UI效果用传统的方式实现标签结构和样式基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑声明式编程模板的结构和最终显示的效果基本一致<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>
复制链接

扫一扫