|
[开发工具]
求助,${}无法动态更新style
[复制链接]
各位大佬求助!
我要做一个底部导航栏,通过vue 的style动态绑定,把data中tabs里面每一个数据的icon值赋值到图片的url当中,但是我用wifi真机调试的时候发现图标并没有加载出来,请问有谁知道是怎么回事吗?以下附上源码vue js代码:
var vm;
apiready = function(){
initVue();
};
function initVue(){
vm = new Vue({
el:'#app',
data:{
currentIndex:0,
tabs:[
{
name:'Main page',
icon:'mainpage'
},
{
name:'Promotion',
icon:'promotion'
},
{
name:'Schedule',
icon:'schedule'
},
{
name:'User',
icon:'user'
}
]
}
})
}
html代码:
<div class="footer">
<div class="tab-item" v-for="tab in tabs">
<div class="tab-icon" :style = "'background-image: url(./image/tab/icon_${tab.icon}_normal.png);'"></div>
<p>{{tab.name}}</p>
</div>
</div>
wifi真机调试效果图:
|
|