如何在Vue中将v-for的值绑定到HTML属性？

Question

我试图将从v-for获取的值附加到同一标记中的属性，但没有成功。这是我的代码：

 <label 
      v-for="hashtag in hashtags" 
      v-bind:title=`You can filter with {hashtag}`
      v-bind:data-value="hashtag"
 ></label>

基本上，该值会传递到 title 和 data-value 中。

- user4481538

Answer 1

你的标题绑定应该在表达式前后加上双引号，看起来你想在标题中进行字符串插值，但我认为这不会起作用。

尝试这样做（你可以省略v-bind，因为:是它的简写）

<label v-for="hashtag in hashtags"  :title="'You can filter with ' + hashtag" :data-value="hashtag">
   {{ hashtag }}
</label>

https://jsfiddle.net/5sqs5fsq/

- Evaldo Bratti

---

这里需要注意的一件重要事情是，如果你使用v-bing/:，那么等号右侧必须是一个JavaScript有效表达式，因为它将被Vue评估。 :sum="5+5" 将被评估为数字10。 sum="5+5" 将被评估为字符串 5+5。 对于字符串 :title="'a' + 'string'"，你需要在双引号内部加上单引号才能使其正常工作。 - Evaldo Bratti