美文网首页程序员
vue 绑定 动态请求回来得background

vue 绑定 动态请求回来得background

作者: 前端_周瑾 | 来源:发表于2018-05-21 20:03 被阅读0次

今天,在用vue-cli做一个项目得时候,遇到一个小问题,所以 背景图片background 都是动态请求数据过来,而且还需要拼接,看似很简单,其实很考验javascript基础的功底,以及对vue的理解,具体怎么操作呢,我们往下看:
正常background的写法

<div style='background:url(./img/tu.png)'></div>

但是动态的背景图怎么写呢:

<div v-for='item in data'>
  <div :style="{ background: 'url(' + item.img + ')' }"></div>
:style 绑定动态数据,{}引用动态数据, 不变的部分用 引号引住, 动态的部分不要用引号 中间用 + 号拼接起来
</div>

接下来,再给大家演示一下我的案例,每张图片的链接前面都有一个前缀,后面的部分是通过数据动态请求回来的:

<div v-for='item in data'>
 <div :style = " { background: 'url(www.aizhoujin.top/image/' + item.img+ ')' } ">text</div>
</div>

其实请求动态数据的传回来的背景颜色也是一样的

<div v-for='item in data'>
 <div :style = " { background: '#' + item.icon_color + ' '}">text</div>
 请求动态的背景颜色,最后要在拼接一下
</div>

相关文章

  • vue 绑定 动态请求回来得background

    今天,在用vue-cli做一个项目得时候,遇到一个小问题,所以 背景图片background 都是动态请求数据过来...

  • vue小技巧

    Vue - style绑定background 注意 属性中存在'-'需要修改,如background-size需...

  • Vue双向绑定实例教程

    Vue双向绑定实例教程 双向绑定简介 我们知道Vue是一个典型的MVVM框架,Vue在动态绑定这一块提供了丰富的A...

  • vue 3.x 学习前 的查缺补漏

    > vue 2 查缺补漏 >>>> 动态 属性绑定 >>>> 循环绑定 >>>> 方法传值 传入事件对象 >>>>...

  • Vue 实例 一

    Vue实例基础一 数据的双向绑定 v-model 绑定表单的相应事件,和数据实现动态的双向绑定,需要在Vue实例中...

  • vue的this.$set的作用

    用于手动让vue实现动态绑定数据 如果我们在创建实例以后,再在实例上绑定新属性,vue是无法进行双向绑定的。比如:...

  • angularJs ng-style实际用法

    项目里,总有需要动态绑定样式的地方。angularJs和vue动态绑定样式的制定方法大同小异。 ng-class道...

  • vue数据绑定

    自动转义,VUE自带,防止注入攻击 解决方法: 动态绑定CSS

  • vue面试常见问题

    vue中动态绑定class的方式? watch和computed的区别 vue中key的作用 vue父传子 子传父...

  • 【融职培训】Web前端学习 第10章 小程序开发4 小程序开发

    一,数据绑定 VUE:vue动态绑定一个变量的变量元素的某个属性的时候,会在变量前面加上冒号:,例: 我的titl...

网友评论

    本文标题:vue 绑定 动态请求回来得background

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