Vue插值中的样式文本

【问题标题】：Styled text in vue interpolationVue插值中的样式文本
【发布时间】：2019-03-12 19:39:02
【问题描述】：

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

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

然后：

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

当然，希望是看到，这个：

此文本中有 BOLD 个字词。

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

【问题讨论】：

【解决方案1】：

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

像这样：

HTML

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

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

安全建议：如果您的用户有可能修改 htmlReturningFn 中的内容，则不建议使用它，因为可能存在跨站脚本 (XSS ) 问题。

【讨论】：