Question

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

E.g。

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

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

1 个答案: