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

Question

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

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

然后

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

但是，这只是打印</br>，而不是换行。我是新来的，所以不确定我做错了什么？

Answer 1

问题不在于过滤器。这就是你实现它的方式。你需要使用Vue文档中的v-html指令，因为你想写html而不是text:

<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)
}
}
}

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>