原型正在返回我的函数而不是返回值

马库斯·莱安德(Marcus Leander)

我想创建与图片相似的页面的字幕 在此处输入图片说明

我想通过从main.js调用我的原型来做到这一点

Vue.prototype.subtitlePage = function () {
  var path = this.$route.path;
  var array_path = path.split('/');
  var subtitle = "<ul class='subtitle'>";
  var index;
  for (index = 1; index < array_path.length - 2; index++) {
    subtitle += "<li>" + array_path[index] + "</li> >>";
  }
  subtitle += "<li>" + array_path[index] + "</li><ul>";
  return subtitle;
}

我在构造屏幕时以这种方式调用函数

<p class="indextitle">Subir Nova Redação</p>
<p v-html="subtitlePage"></p>

但是,屏幕上显示的文本不是函数中安装的html return,而是我函数的代码

function () { var path = this.$route.path; var array_path = path.split('/'); var subtitle = "
"; var index; for (index = 1; index < array_path.length - 2; index++) { subtitle += "
" + array_path[index] + "
>>"; } subtitle += "
" + array_path[index] + "
"; return subtitle; }

有谁知道我在做错什么,我必须在代码中进行哪些更改才能显示在字幕中,我在函数中设置了什么?

那将是烧瓶

v-html期望一个字符串,而给定一个函数,这将导致字符串化的函数输出。它应该是:

<p v-html="subtitlePage()"></p>

实际上,切勿使用用户定义的数据来完成此操作。

在网站上动态呈现任意HTML可能非常危险,因为它很容易导致XSS攻击。仅对受信任的内容使用v-html,而不对用户提供的内容使用v-html。

URL是用户定义的数据。罪魁祸首可以对其进行定制,以在用户端评估任意JS。

正确的方法是为面包屑创建一个组件,并使用以下命令将其输出:

<li v-for="pathSegment in pathSegments">{{pathSegment}}</li>

如果某个段可能包含URL编码的符号(在此示例中为空格和非ASCII字符),则需要另外对段进行转换decodeURIComponent(原始代码未涵盖此段,这将是的主要危害v-html)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章