之前学习 Vue 做的菜管项目有个问题,不知道怎么给元素设置 Background 形式的图片。为了解决这个问题我还上网搜了改了一波,结果发现还是用不了,郁闷了好久。
// 错误方式
<section style="background-image: 'url(' + food.image + ');"></section>
// 正确方式
<section :style="'background-image: url(' + food.image + ')'"></section>
// 或者是用对象的形式
<section :style="{backgroundImage: 'url(' + food.image + ')'}"></section>
今天突然回想到了这个问题,改了一波发现完美解决!当时真是傻了,怎么我就忘记了 v-bind
里面放的内容是个表达式呢!
与此同时,我还优化了歌单页的布局写法,原来是通过 JS 判断滚动幅度调整左侧专辑图的坐标,而现在将其封装成了 Polyfill,仅限在浏览器不支持 position: sticky
属性的情况下,才会执行这个函数。