在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 {&nbsp; computed: {&nbsp; &nbsp; productTitle() {&nbsp; &nbsp; &nbsp; return this.$options.filters.splitRows(this.product.title)&nbsp; &nbsp; }&nbsp; }}

Answer 2

html 标签内的值在 Vue.js 中将被视为字符串。这需要将标签绑定为html。<span&nbsp;class="Name"&nbsp;v-html="product.title"></span>由于过滤器在绑定部分无法正常工作，因此可以如下调用：<span&nbsp;class="Name"&nbsp;v-html="$options.filters.splitRows(product.title)"></span>