Vue-tab切换

最新推荐文章于 2022-08-08 16:48:51 发布

前端笨鸟

最新推荐文章于 2022-08-08 16:48:51 发布

阅读量217

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41670147/article/details/103719313

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 990px;
            min-height: 220px;
        }
        
        .tab_nav {
            display: inline-block;
            display: block;
            position: relative;
            height: 40px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }
        
        .tab_nav li {
            position: relative;
            display: inline-block;
            padding: 10px 25px;
            font-family: "microsoft yahei";
            cursor: pointer;
            font-size: 14px;
        }
        
        .tab_nav li.current {
            background: #e4393c;
            color: #fff;
        }
        
        .tab_cont {
            padding: 10px 25px;
        }
        
        .tab_cont div {
            display: none;
        }
        
        .tab_cont div.item {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="tab_nav">
            <li v-on:click='change(index)' :class='currentIndex==index?"current":""' :key='cgtit.id' v-for='(cgtit,index) in list'>{{cgtit.title}}</li>
        </ul>
        <div class="tab_cont">
            <div v-on:click='change(index)' :class='currentIndex==index?"item":""' :key='cgtit.id' v-for='(cgtit,index) in list'>
                <p v-text='cgtit.cont'></p>
            </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: '商品介绍',
                    cont: '商品名称：立白洗衣液'
                }, {
                    id: 2,
                    title: '规格与包装',
                    cont: ' 包装单位:瓶装'
                }, {
                    id: 3,
                    title: '商品介绍',
                    cont: '本产品全国联保，享受三包服务，质保期为：无质保'
                }]
            },
            methods: {
                change: function(index) {
                    this.currentIndex = index;
                }

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

</html>

前端笨鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-tab切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫