美文网首页
假数据 动态渲染本地图片

假数据 动态渲染本地图片

作者: name_howe | 来源:发表于2019-11-26 11:00 被阅读0次
    <template>
        <view>
            <view class="screen-nav">
                <view v-for="(item,index) in navs" :key="index" @click="hover(index)">
                    <text>{{item.name}}</text>
                    <image :src="index==oid?item.iconHover:item.icon"></image>
                </view>
            </view>
        </view>
    </template>
    <script> 
    data() {
        return {
            oid:0, 
            navs:[
                {
                    name:'北京',
                    icon:require('../../static/images/address-list.png'),
                    iconHover:require('../../static/images/address-list-hover.png')
                },
                {
                    name:'工种',
                    icon:require('../../static/images/xl-list.png'),
                    iconHover:require('../../static/images/xl-list-hover.png')
                },
                {
                    name:'日薪',
                    icon:require('../../static/images/sj-list.png'),
                    iconHover:require('../../static/images/sj-list-hover.png')
                },
                {
                    name:'工龄',
                    icon:require('../../static/images/sj-list.png'),
                    iconHover:require('../../static/images/sj-list-hover.png')
                }
            ]
        }
    },
    methods:{
        hover(e){
            this.oid = e
        }
    }
    </script> 
    

    相关文章

      网友评论

          本文标题:假数据 动态渲染本地图片

          本文链接:https://www.haomeiwen.com/subject/mhlewctx.html