2021-12-29 工作记录--Vue-vue背景图片的写法

1、第一种写法

【注意：background-image不用驼峰命名，但是要加引号】

:style="{'background-image': 'url('+后台数据+')'}"

example：（其中alt=""忽略掉，写错了）

对应代码：

<div class="item_img" :style="{'background-image': 'url('+item.thumb+')'}"></div>

2、第二种写法

【注意：backgroundImage用驼峰命名，不加引号】

:style="{backgroundImage: 'url('+后台数据+')'}"

example：（其中alt=""忽略掉，写错了）

对应代码：

<div class="item_img" :style="{backgroundImage: 'url('+item.thumb+')'}"></div>

3、【补充】 vue里面动态绑定style，需要加单大括号

理由：（公司滴优秀滴哥哥为我解答滴☺️）

你可以这样理解：动态绑定 style 就需要把 css 属性看成是一个 对象{"color":"#fff","fontSize":"18px",....}，就有点像是 jQuery 动态设置多个 css 语法—— $(".nav").css({"color":"#fff","fontSize":"18px",....})

所以才需要加 单大括号