vue动态style添加背景图backgroundImage,结合computed
vue涉及到图片需要用require,注意单引号/双引号的使用<template v-for="(item,index) in menu"><div :key="item.id":style="{backgroundImage:'url('+itemImg(item)+')'}"></div></template>需要传参的话要用闭包的形式接收参数c
·
vue涉及到图片需要用require,注意单引号/双引号的使用
<template v-for="(item,index) in menu">
<div :key="item.id"
:style="{backgroundImage:'url('+itemImg(item)+')'}">
</div>
</template>
需要传参的话要用闭包的形式接收参数
computed:{
itemImg() {
return (item) => {
return require(`../assets/image/main/menu_${item.id}.png`)
}
}
}
也可以直接写在标签上
<template v-for="(item,index) in menu">
<div :key="item.menuId"
:style="{backgroundImage:'url('+require(`../assets/image/main/menu_${item.id}.png`)+')'}">
</div>
</template>
更多推荐
已为社区贡献4条内容
所有评论(0)