vue内联绑定背景图片
2018-11-16 本文已影响0人
_嗯_哼_
遇到一个问题: 动态请求回来一个背景图片,然后用内联样式写上去,但是设置的背景大小的样式不生效。
---html
<template>
<div class="convert-guide-warp" :style="{background: 'url('+convertGuideData.image+')',backgroundSize:'cover'}">
<button ref="copyBtn" data-clipboard-action="copy" class="guide-atonce-btn" @click="copyLink">{{ convertGuideData.button_text }}</button>
</div>
</template>
js
export default {
data() {
return {
copyBtn: null,
convertGuideData: {}
};
},
created(){
this.getConverGuideDate();
},
methods:{
getConverGuideDate() { //请求接口
const parames = {
project: 'try_out'
};
apis.getConverGuide(parames).then(res => {
this.convertGuideData = res;
});
}
}
}
convertGuideData是请求接口用来存放接口数据的对象,但是像这样虽然图片渲染了,但是设置backgroundSize不生效。这是因为vue生命周期造成, created在实例创建之后同步调用。此时实例已经结束解析选项,这意味着已建立:数据绑定
所以粗暴的 直接加上一个if
image.png