如何在 Vue Js 中做多个过滤器？

Question

我正在尝试使用多个过滤器，但它不起作用，这是我的代码。它并没有变成小写，只是删除了空格。

编辑：

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

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

JS

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

Answer 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 一起使用，如上所示。

Answer 2

@PenAndPapers，你应该为小写字母编写你自己的过滤器，因为第 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>

如何在 Vue Js 中做多个过滤器？

How to do multiple filter in Vue Js?

javascript

frontend

filter

vue.js

vuejs2