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

最新推荐文章于 2025-02-21 14:34:24 发布

原创最新推荐文章于 2025-02-21 14:34:24 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #backgroundImage动态加载url

前端-Vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了一个基于Vue.js的项目中如何实现导航栏按钮的动态背景切换效果。通过使用v-for指令遍历数据列表，结合v-bind动态绑定背景图片，并在点击事件中改变按钮颜色及背景，实现了美观且响应式的导航栏设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最后的代码：

说明: 本项目图片放置位置：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);
		},	
	}
}

-效果
在这里插入图片描述