在 vue 中用换行符拆分字符串的问题

Question

所以我试图设置一个过滤器，用 a 替换连字符，<br>将它吐到新行上。我创建了一个这样的过滤器：

filters: {

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

进而

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

但是，这只是打印</br>而不是断线。我是 vue 新手，所以不确定我做错了什么？

Answer 1

问题不在于您的过滤器。这就是你如何实施它。您需要使用Vue 文档中的v-html指令，因为您想编写 html 而不是文本：

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

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

如您所见，没有更多的管道。问题是使用管道语法的过滤器不支持文本渲染以外的任何东西。您仍然可以通过$options对象访问过滤器来使用过滤器。

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

export default {
  computed: {
    productTitle() {
      return this.$options.filters.splitRows(this.product.title)
    }
  }
}