Vue插值中的样式文字

Question

有没有办法制作这样的内插文本：

<div>{{htmlReturningFn()}}</div>

然后：

methods: {
  htmlReturningFn () {
    return `there are <strong>BOLD</strong> words in this text`
  }
}

当然，希望是这样的：

这段文字中有粗体字。

我知道我可以为模板中的不同部分设置样式，但是我要设置样式的文本很长，需要加粗的单词是无法预测的。

Answer 1

您可以使用v-html指令和计算属性。

像这样 ：

的HTML

<div v-html="htmlReturningFn"></div>

JS

computed: {
  htmlReturningFn: function ()  {
    return `there are <strong>BOLD</strong> words in this text`
  }
}

关于原始HTML的VueJS文档

安全建议：如果您的用户有可能修改htmlReturningFn其中的内容，由于可能存在跨站点脚本（XSS）问题，建议不要使用它。