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>

我编辑了我的第一个答案，因为filter可以与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中进行多重过滤？

2 个答案: