Vue.js Vue：在用v-html指令标记的父元素中嵌入子元素

我想在用

v-html

指令标记的父元素中嵌入/放置一个子元素。这就是我现在所拥有的，显然是不正确的：

<span v-for="(word, index) in words" :key="index" v-html="word">
  <span>test</span>
</span>

测试

test

未呈现到DOM

---

如何实现这一点？

属性

v-html

将使用提供的内容覆盖内容，这就是为什么不呈现span元素的原因

您需要将内容前置/追加到传递到v-html属性的变量中，或者将其移动到其他节点

例如：

<span v-for="(word, index) in words" :key="index" v-html="word + '<span>test</span>'"></span>

或

var word=“某物”
...
word+=“测试”

或

测试

第三个答案是最干净的IMHO

var word = "something"
...
word += "<span>test</span>"

<span v-for="(word, index) in words" :key="index" v-html="word"></span>

<span v-for="(word, index) in words" :key="index">
  <span>test</span>
  <span v-html="word"></span>
</span>