如何在 Vue Js 中进行多重过滤？答案

【问题标题】：How to do multiple filter in Vue Js?如何在 Vue Js 中进行多重过滤？
【发布时间】：2017-10-27 01:04:53
【问题描述】：

我正在尝试使用多个过滤器，但在这里不起作用是我的代码。它不会使其变为小写，它只是删除空格。

编辑：

对于小写我想使用Vue js过滤器lowercase

<div class="col-md-4" :class="playerBio.current_team | lowercase | removespace ">

    removespace( str ) {
        if( str ) {
            return str.replace(/\s+/g, '').toLowerCase();
        }
    }

【问题讨论】：

请添加您的过滤器代码。
您的链接适用于 Vue1。你确定要问 [vuejs2] 吗？在 Vue2 中，您可以链接 filters
@KirillMatrosov 对 Vue1 中的链接感到抱歉，但我目前正在使用 Vue 2，我该如何实现？

标签： javascript filter vue.js frontend vuejs2

【解决方案1】：

例子：

new Vue({
  el: '#app',
  data: {
    myText: 'Hello There Vue'
  },
  mounted() {
    console.log(this.$refs['div']) // log this div
  },
  filters: {
    lowercase: function(value) {
      return value.toLowerCase()
    },
    removespace: function(value) {
      return value.replace(/\s/g, '')
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
<div class="col-md-4" :class="myText | lowercase | removespace" ref="div"></div>
</div>

我编辑了我的第一个答案，因为它似乎 filters 可以与 v-bind 一起使用，如上所示。

【讨论】：

【解决方案2】：

@PenAndPapers，您应该为 lowercase 编写自己的过滤器，因为第 2 节中没有现成的过滤器。

var demo = new Vue({
    el: '#demo',
    data: {
    	cls: "cL ass"
    },
    filters: {
      lowercase: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.toLowerCase();
      },
      removespace( str ) {
          if( str ) {
              return str.replace(/\s+/g, '');
          }
      }
    }
})

.class
{
  height: 50px;
  width: 50px;
  background-color: red;
}

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
    {{cls | lowercase | removespace}}
    <div v-bind:class='cls | lowercase | removespace'></div>
</div>

【讨论】：