在为img元素设置动态的url时,遇到了问题:

    <img 
        v-for="item in 10 " 
        :key="item"
        src="item.png"/>

原本意思是,根据item 然后通过字符串拼接,形成一个地址,但是我试了很多方法都不得行:

    <img :src={{item + '.png'}}/>
    <imt :src="${item}.png"/>

最后,通过参考别人的方式,使用下面这种方式解决了问题

    <img 
        v-for="item in 10" 
        :key="item"
        :src="'../static/images/0' + (item<10?('0'+item):item) + '.jpg'"
        />

用上面的方法,我得到了正确的结果。
在v-bind标签中,单引号”引用的内容,我们作为一个真正的字符串使用,双引号”“应用的内容,作为变量/表达式而使用,因此双引号中的内容可以进行运算,所以,上面这种方式就可以得到正确的结果了,很重要的一条内容!!

Logo

前往低代码交流专区

更多推荐