在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 攻击。如果您编写的数据并非来自您本人（例如来自第 3 方 API 的数据或来自文本字段的数据），请采取安全措施去除恶意代码。

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

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

export default {

  computed: {

    productTitle() {

      return this.$options.filters.splitRows(this.product.title)

    }

  }

}

Answer 2

html 标签内的值在 Vue.js 中将被视为字符串。这需要将标签绑定为html。

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

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

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