javascript - 如何在元素的参数中使用变量？

Question

我使用下面的代码创建了几个<div> v-for 中的元素循环:

<div class="row" v-for="sentinel in sentinels">
    <div class="cell date">{{ sentinel.when }}</div>
    <div class="cell city">{{ sentinel.city }}</div>
</div>

它工作得很好。

我现在想用 <img> 来扩展它元素:

<div class="row" v-for="sentinel in sentinels">
    <div class="cell date">{{ sentinel.when }}</div>
    <div class="cell city">{{ sentinel.city }}</div>
    <div class="cell country"><img src={{ sentinel.flagURL }} title={{ sentinel.country }}></div>
</div>

此操作失败并显示 Uncaught Error: Error parsing template:(…)控制台中出现错误。

sentinel.flagURL和sentinel.country使用调试器检查时具有正确的(预期)值。

是否不仅可以在开始和结束标记之间使用变量(上述情况下为 {{ sentinel.whatever }})，还可以在标记的参数中使用变量？

Answer 1

只需绑定(bind)您的元素 without mustaches :

<div class="cell country"><img :src="sentinel.flagURL" :title="sentinel.country"></div>

HTML 中的图像标记:

<img src="">