vue动态绑定src加字符串拼接
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
关键点
- 1.img中的src的字符串动态拼接
- 2.style中的background属性赋值
一.img中的src的字符串动态拼接
-
1.问题是这样子的,瞧瞧
基本网络链接 : http://openweathermap.org/img/w/02n.png ; 但是了字符'02n'是动态的,切换它可以获取不同的天气图片,如果这样的链接在vue的v-for中该如何拼接字符串了,下解: -
2.解决这个问题
- 方法一(你可以这样写)、
<ul> <li v-for='item in weatherArr'> ![]('http://openweathermap.org/img/w/'+item.weather[0].icon+'.png') </li> </ul>
- 方法二(你还可以这样写:es6的语法)
<ul> <li v-for='item in weatherArr'> <img :src=`http://openweathermap.org/img/w/${item.weather[0].icon}.png`> </li> </ul>
二.style中通过background设置背景图片
- 写法和上面类似,就是拼接字符串,直接上代码吧
<ul> <li class="imgStyle" v-for='item in items' :style="{background:'url('+item.imgURL+')'}"></li> </ul>
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)