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

Question

我有一个 function 应该返回这个：

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

其中 lastMessageShort 是对象数组中的值。 在 HTML 中，一切正常，直到我尝试打印图标。 在 HTML 中打印的代码部分是这样的：

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

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

Answer 1

每当你想output动态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 的任何标签，然后调用 function 将其返回到v-html中。