码迷,mamicode.com
首页 > 其他好文 > 详细

vue-tab栏

时间:2020-01-12 20:20:55      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:css   class   ret   item   rop   height   orange   index   fun   

技术图片

 

 

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

vue-tab栏

标签:css   class   ret   item   rop   height   orange   index   fun   

原文地址:https://www.cnblogs.com/theShyer/p/12184392.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!