美文网首页
vue内联绑定背景图片

vue内联绑定背景图片

作者: _嗯_哼_ | 来源:发表于2018-11-16 16:29 被阅读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

    相关文章

      网友评论

          本文标题:vue内联绑定背景图片

          本文链接:https://www.haomeiwen.com/subject/dhmmfqtx.html