在 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) {

  let a = text.split('%');

  let str = '';

  for (let x = 0; x < a.length; x++) {

    str += a[x];

    if (x % 2 == 0) {

        if (x < a.length - 1)

        str += '<b>';

    }

    else {

        str += '</b>';

    }

  }

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

  const wordToWrap = value.substring(

    value.indexOf("%")+1, 

    value.lastIndexOf("%")

  )

  const wrappedWord = `<b>${wordToWrap}</b>`

  value = value.replace(wordToWrap, wrappedWord)

  return value;

})

这应该有效。我让它在 vue 操场上工作。干杯！

Answer 3

正则表达式就是这样：D

编辑：“2.0 过滤器仅适用于 mustache 标签和 v-bind。”

cfr: https://github.com/vuejs/vue/issues/4352

new Vue({

  el: "#app",

  data: {

    text: 'Hello %John%. How are you doing %today%?'

  },

  filters: {

    wrapText(str) {

      return this.wrapText(str)

    }

  },

  methods: {

      wrapText(str) {

      if (str.includes('%')) {

          const reg = /(%[A-Za-z0-9]*%)/g

          const newStr = str.replace(reg, '<b>$1</b>')

          return newStr

        }

        return str

    }

  }

})

<div id="app">

  <h2>This is a text</h2>

  <p v-html="wrapText(text)">

  </p>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

这filter部分不再需要，但我还是把它留下了。