vue动态绑定src加字符串拼接

忘是亡心i 2023-07-06 10:29 27阅读 0赞

关键点

*  1.img中的src的字符串动态拼接
 *  2.style中的background属性赋值

### 一.img中的src的字符串动态拼接 ###

*  **1.问题是这样子的,瞧瞧**  
    基本网络链接 : [http://openweathermap.org/img/w/02n.png][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>

[http_openweathermap.org_img_w_02n.png]: https://link.jianshu.com/?t=http://openweathermap.org/img/w/02n.png

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目动态绑定:src添加本地背景音乐

先audio标签属性使用:src <audio class="audio" ref="audio" autoplay :src="soonUrl"></audi...

深藏阁楼爱情的钟/ 2024年04月17日 20:54/ 0 赞/ 71 阅读

相关 Vue 动态样式绑定

1. 简介本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

迈不过友情╰/ 2024年03月27日 08:47/ 0 赞/ 99 阅读

相关 vue动态绑定class

Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名，从而实现动态样式控制。以下是一些示例：动态

╰+攻爆jí腚メ/ 2024年02月21日 10:35/ 0 赞/ 12 阅读

相关 vue动态绑定src加字符串拼接

关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值一.img中的src的字符串动态拼接 1.问题是

忘是亡心i/ 2023年07月06日 10:29/ 0 赞/ 28 阅读

相关 Vue项目中动态绑定src路径

问题1 vue项目中图片路径为变量时不能显示，如下 <img :src="imgSrc" alt=""> this.MyimgSrc = ‘../../

野性酷女/ 2023年05月30日 15:58/ 0 赞/ 21 阅读

相关 vue 动态绑定placeholder

前言：当placeholder的值不唯一时，就可以动态绑定placeholder ![在这里插入图片描述][20201130155335620.png] <div

一时失言乱红尘/ 2022年12月25日 04:50/ 0 赞/ 166 阅读

相关 vue中图片src动态拼接

有时我们需要动态拼接图片的路径，可以使用下面的方式 <img :src="getImgUrl(item)" v-for="(item, index) in array

桃扇骨/ 2022年11月14日 10:26/ 0 赞/ 411 阅读

相关 vue 动态绑定 id

<div class="layui-tab-item" :class="{ 'layui-show': key === 0}" v-for="(cur, key) in

太过爱你忘了你带给我的痛/ 2022年01月27日 00:07/ 0 赞/ 837 阅读

相关 vue动态绑定class

<li v-for="(item,index) in processOptions" class="process-list-item" :class="{ ' is-

╰+哭是因爲堅強的太久メ/ 2021年07月25日 20:53/ 0 赞/ 507 阅读

相关 vue 动态绑定img的src属性,图片失效

静态绑定都不失效动态绑定src时： 1、放置在static文件夹内的图片,可直接动态绑定不失效 2、放置在其他文件夹的图片,动态绑定

╰半橙微兮°/ 2021年07月25日 00:41/ 0 赞/ 800 阅读