使用 v-model 后 filter 失效怎么办

v-model 和 filter 的作用这里就不介绍了，直接看解决办法~~，相信在看这篇博客的同学对这两者是有了解的。

先看问题：

<div>{{name | upper}}</div>

filters : {
    upper(value) {
        return value.toUpperCase();
    }
},

通过这种方法是可以实现过滤变为大写字母的，但是，当变为以下情况：

<input type="text"  v-model="num"> //这里增加了v-model

即使用了 v-model 指令，那么 filter 就不会生效，解决办法是把过滤属性变为 计算属性。

// 由于v-model双向绑定不能使用filter，所以通过计算属性代替
computed: {
   num: {
      get: function () {
         return this.num; //获取的时候直接获取值
      },
      set: function (value) {
         this.num = value.toUpperCase(); //设置的时候变为大写
       }
    }
},

搞定收工~~

阅读更多