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

Question

我使用以下代码在 v-for 循环中创建一些 <div> 元素：

<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

只需绑定您的元素 without mustaches:

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

HTML 中的图片标签：

<img src="">

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

How to use a variable in the parameters of an element?

javascript

vue.js