vue-tab栏

Posted 2021-03-16 theshyer

 

 

<template>
    <div>
        <ul>
            <li @click="change(index)" :key=‘item.id‘ v-for="(item,index) in list">{{item.title}}</li>
        </ul>
        <div class="div-class">
            <img v-show="index==currentId" :style=‘getImgStyle()‘ :key="item.id" v-for="(item,index) in list" :src="item.path">
        </div>
    </div>
</template>

<script>
    export default {
        name: "HelloWorld",
        props:{
                        
        },
        data() {
            return {
                currentId : 0,
                isImg_currnt : false,
                list:[{
                    id:1,
                    title:‘apple‘,
                    path:require(‘../img/mmexport1578014408066.jpg‘)
                },{
                    id:2,
                    title:‘orange‘,
                    path:require(‘../img/mmexport1578014452372.jpg‘)
                },{
                    id:3,
                    title:‘lemon‘,
                    path:require(‘../img/mmexport1578014461314.jpg‘)
                } 
                ]
            };
        },
        methods: {
            change:function(index){
                this.currentId = index
            },
            getImgStyle:function(){
                return{
                    paddingLeft:"500px",
                    width:"200px",
                    height:"400px",
                    display:"block"
                }
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    li{
        display: inline-block;
        width: 100px;
        height: 20px;
        border:1px solid blue
    }
    .img-currnt{
        display:block
    }
    img{
        display:none
    }
</style>