在 Vue 过滤器中的 HTML 之间换行文本

Question

在 vuejs 中，是否可以将文本的某些部分包裹在 HTML 标签中？

喜欢Hello %John%. How are you doing? 变成Hello <b>%John%</b>. How are you doing?

带有过滤器，例如

{{text | wrapText}}

Answer 1

您可以编写自己的过滤器。Vue.filter('wrapText', function (text) {&nbsp; let a = text.split('%');&nbsp; let str = '';&nbsp; for (let x = 0; x < a.length; x++) {&nbsp; &nbsp; str += a[x];&nbsp; &nbsp; if (x % 2 == 0) {&nbsp; &nbsp; &nbsp; &nbsp; if (x < a.length - 1)&nbsp; &nbsp; &nbsp; &nbsp; str += '<b>';&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; str += '</b>';&nbsp; &nbsp; }&nbsp; }&nbsp; return str});

Answer 2

我从未合作过，vue但我在过去 15 分钟内读了一点，我想我找到了解决方案。您可以使用 javaScript 方法。可能有更简洁的方法来实现相同的结果。重要的事实是将 vue 自定义过滤器与:inner-html.prop. 它看起来不是很“安全”，但如果你控制在那里插入什么 html，你应该没问题。所以在 html 中你可以做类似的事情 <span :inner-html.prop="text | wrapText"></span>然后声明您的过滤器。我读到有两种方法可以声明它们：全局或组件内部，您选择。全球范围内Vue.filter('wrapText', function (value) {&nbsp; const wordToWrap = value.substring(&nbsp; &nbsp; value.indexOf("%")+1,&nbsp;&nbsp; &nbsp; value.lastIndexOf("%")&nbsp; )&nbsp; const wrappedWord = `<b>${wordToWrap}</b>`&nbsp; value = value.replace(wordToWrap, wrappedWord)&nbsp; return value;})这应该有效。我让它在 vue 操场上工作。干杯！

Answer 3

正则表达式就是这样：D编辑：“2.0 过滤器仅适用于 mustache 标签和 v-bind。”cfr: https://github.com/vuejs/vue/issues/4352new Vue({&nbsp; el: "#app",&nbsp; data: {&nbsp; &nbsp; text: 'Hello %John%. How are you doing %today%?'&nbsp; },&nbsp; filters: {&nbsp; &nbsp; wrapText(str) {&nbsp; &nbsp; &nbsp; return this.wrapText(str)&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; &nbsp; wrapText(str) {&nbsp; &nbsp; &nbsp; if (str.includes('%')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const reg = /(%[A-Za-z0-9]*%)/g&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const newStr = str.replace(reg, '<b>$1</b>')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return newStr&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return str&nbsp; &nbsp; }&nbsp; }})<div id="app">&nbsp; <h2>This is a text</h2>&nbsp; <p v-html="wrapText(text)">&nbsp; </p></div><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>这filter部分不再需要，但我还是把它留下了。