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

Question

我正在尝试使用 Vue.js 中的过滤器功能在字符串中添加 html 标签，文档表明这在某种程度上应该是可行的，但我一无所获。关键是数据应该只是一个字符串，它被引入到 html 中，并且在它被安装之前过滤器应该在数据中搜索关键词(例如“参见引用”)并且引用词应该变成一个 anchor 链接。

例如

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

不要说:

 <p>The text string with a link</p>  

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

 <p>The text string with a <a href="someLink">link</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>