当前位置:  开发笔记 > 编程语言 > 正文

Vue插值中的样式文字

如何解决《Vue插值中的样式文字》经验,为你挑选了1个好方法。

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

{{htmlReturningFn()}}

然后:

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

当然,希望是这样的:

这段文字中有粗体字。

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



1> Toodoo..:

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

像这样 :

的HTML

JS

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

关于原始HTML的VueJS文档


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

推荐阅读
重庆制造漫画社
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有