vue选项卡

切换内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #app{
                width: 220px;
                height: 200px;
                background: aqua;
                /*margin: 50px auto;*/
            }
            ul{
                position: fixed;
            }
            li{
                list-style: none;
                float: left;
                margin-right: 34px;
                width: 50px;
                height: 30px;
                background: red;
                text-align: center;
                line-height: 30px;
            }
            .content>div{
                width: 100px;
                height: 50px;
                position: absolute;
                top: 35px;
                left: 0px;
                width: 216px;
                height: 160px;
                border: 1px solid red;
                text-align: center;
                line-height: 169px;
            }
            .active{
                background: green;
            }
            .bgg{
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in list"
                    :class="{'active':curIndex===index}"
                    v-on:click="setindex(index)">
                    <!--文本的插值-->
                    <span>
                        {{item.title}}
                    </span>
                </li>
            </ul>
            <div class="content">
                <div v-for="(item,index) in list"
                v-show="curIndex===index">
                <p>{{item.content}}</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <!--需要一个属性curIndex,记录当前显示的下标-->
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                methods:{
                    setindex(i){
                        this.curIndex=i;
//                      console.log(i);                     
                    }
                },
                data:{
                    curIndex:0,
                    list:[
                    {id:1,title:"选项1",content:"内容1"},
                    {id:2,title:"选项2",content:"内容2"},
                    {id:3,title:"选项3",content:"内容3"}
                    ]
                }
            });
            
        </script>
    </body>
</html>

动态组件

<template>
    <div class="appointment">
        <swiper :carouselArr="imgArr"></swiper>
        <div class="tab">
            <div class="title">
                <button :class="idx==0?active:''" @click="cutTab(0)">景点进去</button>
                <button :class="idx==1?active:''" @click="cutTab(1)">酒店住宿</button>
                <button :class="idx==2?active:''" @click="cutTab(2)">美食餐饮</button>
            </div>
            <!--动态组件-->
            <components :is="arr[idx]"></components>
        </div>
    </div>
</template>

<script>
    import swiper from '@/components/swiper.vue'
    import img1 from "@/assets/img/our1.jpg"
    import img2 from "@/assets/img/our3.jpg"
    import scenic from '@/components/appointment/Scenic.vue'
    import hotel from '@/components/appointment/Hotel.vue'
    import food from '@/components/appointment/food.vue'
    
    export default {
        name:"appoint",
        components:{
            swiper,
            scenic,
            hotel,
            food
        },
        data(){
            return {
                imgArr:[
                    img1,
                    img2
                ],
                arr:["scenic","hotel","food"],
                idx:0,
                active:"active"
            }
        },
        methods:{
            cutTab(idx){//切换动态组件
                this.idx = idx;
            }
        }
    }
</script>

<style lang="scss">
    .tab{
        max-width: 1200px;
        margin: 30px auto;
        .title{
            button{
                width: 33.33%;
                height: 83px;
                background: #666;
                font-size: 24px;
                color: #fff;
            }
            .active{
                background: #c3c3c3;
            }
        }
    }
</style>

推荐阅读更多精彩内容