Javascript 在vue中拆分带换行符的字符串时出现问题

因此，我试图设置一个过滤器，用

替换连字符，将其插入新行。 我创建了一个如下的过滤器：

filters: {

  splitRows: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.replace('-', '</br>')
  }
}

过滤器：{
splitRows:函数（值）{
如果（！value）返回“”
value=value.toString（）
返回值。替换（“-”，“
”）
}
}

然后

  <span class="Name">
      {{ product.title | splitRows }}
  </span>

{{product.title | splitRows}}

---

但是，这只是打印

，而不是断行。我是vue新手，因此不确定我做错了什么？

问题不在于您的过滤器。这是你如何实现它的。您需要使用中所示的

v-html

指令，因为您希望编写html而不是文本：

请注意，这是潜在的危险，因为它允许XSS攻击。如果您编写的数据不是来自您的（例如来自第三方API的数据或来自文本字段的数据），请采取安全措施去除恶意代码

正如你所看到的，没有更多的管道了。问题是，除了文本呈现之外，其他任何东西都不支持使用管道语法的过滤器。您仍然可以通过

$options

对象访问过滤器来使用它

更优雅的解决方法是使用计算属性：

导出默认值{
计算：{
productTitle（）{
返回此.options.filters.splitRows（this.product.title）
}
}
}

html标记中的值在Vue.js中将被视为字符串。这需要以html的形式绑定到标记

<span class="Name" v-html="product.title"></span>

由于过滤器在绑定部分无法正常工作，因此可以按如下方式调用：

<span class="Name" v-html="$options.filters.splitRows(product.title)"></span>

span标记用于对文档中的内联元素进行分组，我建议为此更改标记的类型！如果我使用computed属性，是否可以在其中创建筛选器，或者我仍然需要单独的筛选器？如果你在应用程序中的多个位置需要筛选器，我会将其添加为全局筛选器。如果没有，您可以将过滤器作为一个函数写入组件外部或单独的文件中，并像调用任何函数一样在计算属性中调用它。