有没有办法制作这样的内插文本:
<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)问题,建议您不要使用它。