使用数据过滤器在Vue.js中添加HTML？

Question

我正在尝试使用Vue.js中的过滤器功能在字符串中添加html标签，文档显示这应该是可行的，但我一无所获。关键是数据应该只是带入html中的字符串，并且在安装之前，过滤器应该在数据中搜索关键字（例如“ See REFERENCE”），并将REFERENCE字转换为锚定链接。

例如

<p> {{String | filterFunction}} </ p>    

与其说出管道，不如说：

 <p>带有链接的文本字符串</ p>  

它应该通过管道输出字符串，但是要插入节点。

 <p>带有<a href="someLink">链接</a> </ p>的文本字符串  

Vue文档建议可以进行javascript组件的组装，但是到目前为止测试还很差。

Answer 1

过滤器仅替换为文本。由于您尝试转换HTML中的纯文本，因此您必须诉诸于v-html或等效。在下面的演示中检查您的选项。

function _linkify(text) {
  return text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1">$1</a>');
}

Vue.filter('linkify', function (value) {
    return _linkify(value)
})

Vue.component('linkify', {
  props: ['msg'],
  template: '<span v-html="linkifiedMsg"></span>',
  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
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Doesn't work: {{ message | linkify }}</p>
  
  <p v-html="$options.filters.linkify(message)"></p>
  
  <p :inner-html.prop="message | linkify"></p>
  
  <p v-html="linkifyMethod(message)"></p>
  
  <p><linkify :msg="message"></linkify></p>
  
  <p><linkify-slot>{{ message }}</linkify-slot></p>
</div>