javascript - 使用 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.