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

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

filters: {

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

然后

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

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

最佳答案

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

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

请注意，这具有潜在的危险，因为它允许 XSS 攻击。如果您写入的数据并非来自您本人(例如来自第三方 API 的数据或来自文本字段的数据)，请采取安全措施去除恶意代码。

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

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

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

关于javascript - 在 vue 中用换行符拆分字符串的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60721212/