Vue2.0 v-for列表渲染 backgroundImage动态加载url

最后的代码：

说明: 本项目图片放置位置：vue项目下 src/assets

-HTML

<router-link class='routerNav' v-for='(mainNavitem,index) in mainNavitems'
	v-on:click.native='clickRed(index)' v-bind:to="mainNavitem.goto">
	<div v-bind:class="mainNavitem.itemClass" v-bind:style='{backgroundImage:mainNavitem.jzUrl}'></div>
	<span>{
  
  {mainNavitem.text}}</span>
</router-link>	

-JS

import red01 from '@/assets/red01.png'
import red02 from '@/assets/red02.png'
import red03 from '@/assets/red03.png'
import red04 from '@/assets/red04.png'
import normal01 from '@/assets/normal01.png'
import normal02 from '@/assets/normal02.png'
import normal03 from '@/assets/normal03.png'
import normal04 from '@/assets/normal04.png'
export default {
	name:'app_main',
	data(){
		return {
			mainNavitems:[
				{
					text:'首页',
					goto:'/main/home',
					itemClass:'icon bghome',
					jzUrl:"url(" + red01 + ")",
					normalUrl:"url(" + normal01 + ")",
					redUrl:"url(" + red01 + ")"
				},
				{
					text:'学习',
					goto:'/main/task',
					itemClass:'icon bglearn',
					jzUrl:"url(" + normal02 + ")",
					normalUrl:"url(" + normal02 + ")",
					redUrl:"url(" + red02 + ")"
				},
				{
					text:'社区',
					goto:'/main/community',
					itemClass:'icon bgcommunity',
					jzUrl:"url(" + normal03 + ")",
					normalUrl:"url(" + normal03 + ")",
					redUrl:"url(" + red03 + ")"
				},
				{
					text:'我的',
					goto:'/main/my',
					itemClass:'icon bgmy',
					jzUrl:"url(" + normal04 + ")",
					normalUrl:"url(" + normal04 + ")",
					redUrl:"url(" + red04 + ")"
				}
			]
		}
	},
	methods:{
		/*nav按钮变色*/
		clickRed:function(index){
			$('.nav_appMain>.routerNav').eq(index).parent().children().css("color","#9d9e9e");
			$('.nav_appMain>.routerNav').eq(index).css("color","rgb(167,33,38)");
			for(var i=0;i<4;i++){
				$('.nav_appMain>.routerNav>.icon').eq(i).css("backgroundImage",this.mainNavitems[i].normalUrl);
			}
			$('.nav_appMain>.routerNav>.icon').eq(index).css("backgroundImage",this.mainNavitems[index].redUrl);
		},	
	}
}

-效果

今天的文章Vue2.0 v-for列表渲染 backgroundImage动态加载url分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。