假数据 动态渲染本地图片

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