美文网首页
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内联绑定背景图片

    遇到一个问题: 动态请求回来一个背景图片,然后用内联样式写上去,但是设置的背景大小的样式不生效。---html j...

  • Vue绑定内联样式

    使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直...

  • 绑定class和内联样式style | 重学Vue3

    这个月开始重新开始学习Vue3,从理解基本使用到模拟实现! 本文是关于Vue中的属性绑定:绑定class和内联样式...

  • Vue.js学习笔记

    样式绑定:1.class对象绑定 2.class数组绑定 3.内联style 对象绑定4.内联style 数组绑定...

  • 事件 (01)

    一.事件的绑定方式 动态绑定 (推荐) (必须全局) 内联模式绑定 点击 (内联模式绑定的函数,必须是全局...

  • Vue.js 绑定内联样式

    这是本人学习《Vue.js实战》 (梁灏) 的笔记,并非原创,只是套着书本实际敲了一遍书中的代码,特此说明。 使...

  • 绑定style样式

    动态绑定背景图片

  • Vue绑定样式

    绑定 Class 对象语法内联绑定 data: { isActive: true, hasError...

  • vue 动态绑定背景图片

    分为两种,第一种是动态绑定后台传来的图片,第二种是我们自己文件夹的图片1.绑定后台传来的图片 2.文件夹的图片(注...

  • vue动态绑定背景图片

网友评论

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

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