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

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

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

当然,希望是这样的:



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

最佳答案

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

像这样 :

HTML

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

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

VueJS Doc about raw html

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

10-06 15:31