用Vue.js 2在HTML中打印一个图标+一个变量+一个字符串

Question

我有一个函数应该返回这个：

<i class="fas fa-check-double"></i>' + lastMessageShort + '...'

其中，lastMessageShort是对象数组中的值。在HTML中，在我尝试打印图标之前，一切都正常。在HTML中，打印的代码部分如下：

<div class="chat-preview">
{{ getLastMessage(index) }}
</div>

该函数从以前的v-for中获取索引，但这部分工作正常。那么，我如何用HTML和其他元素一起打印图标呢？我也尝试过没有结果的模板文字

Answer 1

无论何时想要输出动态HTML，都可以使用vue.js 的v-HTML

这里有一个简单的代码示例：

getLastMessage(index) {
let lastMessageShort = 'hi there' + index
return `<i class="fas fa-check-double"></i> ${lastMessageShort}`
}

在这样的HTML模板中：

<div class="chat-preview">
<span v-html="getLastMessage(2)"></span>
</div>

只需使用要包装动态HTML的任何内部标记，然后调用函数将其返回到v-html中。