如何使用过滤器一次替换两个字符以及如何在 VueJS 的上下文中拥有一个单独的徽章

问题描述

我将来自 API 的文本显示为标记，我想从中过滤某些内容，并且我想为来自 API 的每个单词显示标记。

代码如下：

<span class="badge_style" id="badge" v-if="text.name">{{text.name | displayDesired}}</span>
  ...
  text: [],...
  filters: {
    displayDesired: function (val){
      return val.replace(/_/g,' ')
  },created() {
    this.$http.get(`/all-text`)
      .then((res) => { this.text = res.data })
      .catch((err) => {console.log(err)})
  }
  ... 
  .badge_style {
  display: inline-block;
  padding: .25em .4em;
  font-size: 85%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: Nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  text-transform: capitalize;
},#badge {
 color: white;
  font-size: 12px;
  background: blue;
}

{{text.name}} 显示 => 徽章看起来像这样 change_plan1|change_plan2|change_plan3 这是我从 API 中得到的。

{{text.name | displayDesired}} 与文本转换样式显示 => Change Plan1|Change Plan2|Change Plan3此处的管道应由空格替换并应获得单独的徽章。

预期显示 => 徽章应该看起来像这样 Change Plan1 Change Plan2 Change Plan3

请告诉我如何达到预期的输出

解决方法

将您的过滤器转换为如下方法

methods: {
        displayDesired: function (val){
          return val.replaceAll('_',' ').split('|');
      },

制作模板如下：

<span id="badge" v-if="text.name">
   <template v-for="(val,i) in displayDesired(text.name)">
      <span class="badge_style" style="margin: 2px 2px 2px;" :key="i">{{ val }} </span> 
   </template>
</span>