javascript–使用数据过滤器在Vue.js中添加html？

我试图在Vue.js中使用Filter功能在String中添加html标签,文档表明这应该是可行的,但我无处可去.关键是数据应该只是一个带入html的字符串,在安装之前,过滤器应该在数据中搜索关键字(例如“参见参考”),REFERENCE字应该变成锚链接.

例如.

{{String | filterFunction}}

而不是说出来说：

The text string with a link

它应该管出字符串但是有一个节点插入.

The text string with a link

Vue文档建议Javascript组件组合是可能的,但到目前为止测试已经很糟糕.

解决方法:

过滤器仅替换为文本.由于您尝试在HTML中转换纯文本,因此您必须使用v-html或等效文本.请在下面的演示中查看您的选项.

function _linkify(text) {
return text.replace(/(https?:\/\/[^\s]+)/g, '$1');
}
Vue.filter('linkify', function (value) {
return _linkify(value)
})
Vue.component('linkify', {
props: ['msg'],
template: '',
computed: {
linkifiedMsg() { return _linkify(this.msg); }
}
});
Vue.component('linkify-slot', {
render: function (h) {
let html = _linkify(this.$slots.default[0].text);
return h('span',{domProps:{"innerHTML": html}})
}
});
new Vue({
el: '#app',
data: {
message: 'The text string with a http://example.com'
},
methods: {
linkifyMethod(text) {
return _linkify(text); // simply delegating to the global function
}
}
})