时间戳

首页 > 解决方案 > 原型返回我的函数而不是返回值

javascript - 原型返回我的函数而不是返回值

问题描述

我想为我的页面创建类似于图像的字幕 在此处输入图像描述

我想通过从 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返回，而是我的函数的代码

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; }

有谁知道我做错了什么以及我必须在代码中更改什么才能出现在我在函数中设置的字幕中？

标签： javascriptvue.jsprototype

解决方案

v-html需要一个 string，而给定一个函数，这会导致字符串化的函数输出。它应该是：

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

在实践中，绝不应该对用户定义的数据执行此操作。

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

URL 在这里是用户定义的数据。它可以由罪魁祸首定制，以评估用户端的任意 JS。

正确的方法是为面包屑创建一个组件并将其输出：

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

如果一个段可能包含 URL 编码的符号（本示例中的空格和非 ASCII 字符），则需要另外转换段decodeURIComponent（这在原始代码中未涵盖，这将是 的主要危险v-html）。

推荐阅读