900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue动态style添加背景图backgroundImage 结合computed

vue动态style添加背景图backgroundImage 结合computed

时间:2022-10-03 09:14:50

相关推荐

vue动态style添加背景图backgroundImage 结合computed

一、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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。