Vue为<img />绑定动态url
在为img元素设置动态的url时,遇到了问题:<imgv-for="item in 10 ":key="item"src="item.png"/>原本意思是,根据item 然后通过字符串拼接,形成一个地址,但是我试了很多方法都不得行:<img :src={{item + '.png'}}/><imt :src="${
·
在为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标签中,单引号”引用的内容,我们作为一个真正的字符串使用,双引号”“应用的内容,作为变量/表达式而使用,因此双引号中的内容可以进行运算,所以,上面这种方式就可以得到正确的结果了,很重要的一条内容!!
更多推荐
已为社区贡献4条内容
所有评论(0)