Vue为<img />绑定动态url

来源：互联网发布：java面试葵花宝典2017 编辑：程序博客网时间：2024/05/16 17:07

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

阅读全文

0 0