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
上一篇下一篇

猜你喜欢

热点阅读