Vue2.0 v-for列表渲染 backgroundImage動態載入url
阿新 • • 發佈:2018-12-17
最後的程式碼:
說明: 本專案圖片放置位置: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); }, } }
-效果