javascript - vue插值中的样式文本

Question

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

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

然后:

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

当然希望是看到，这个:

there are BOLD words in this text.

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

Answer 1

您可以使用 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) 问题。