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(); //设置的时候变为大写
}
}
},
搞定收工~~