v-model中使用过滤器

最新推荐文章于 2025-05-14 14:01:02 发布

习惯是一种病

最新推荐文章于 2025-05-14 14:01:02 发布

阅读量9.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue v-model 文章标签： v-model里使用过滤器使用v-model 后 filter 失效怎么办 vue2 v-model/v-text 中使用过滤器 vue的v-model能使用过滤器吗

本文链接：https://blog.youkuaiyun.com/qq_37568942/article/details/102518326

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

v-model

1 篇文章

订阅专栏

本文探讨了在Vue中使用v-model时遇到的格式验证问题，提供了不使用过滤器的替代方案，通过input事件和自定义方法实现输入内容的实时格式检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. v-model不能使用过滤器（filter）的替代或者解决方法;

2. 如图：页面中有v-model需要在输入时验证格式的时候( <input v-model='price' />);

3. 官方给出的方法是使用computed，但是多个框时computed不能很好的复用；

4. 使用input事件，通过传值验证输入框中的内容（如果有更好的方法欢迎留言(●'◡'●) ），直接上代码：

<input v-model="price" @input="priceFormat('price',price)"/>

data(){
    return {
       price:'',//价钱
    }
},
methods: {
    /*价格过滤
     *data：对应data中的名称，是字符串,val：对应data中的值
    */
    priceFormat(data,val){
         if(!/^\d*?\.?\d*?$/.test(val)){
             this[data]='';//修改data中的价钱为空
          }
     }
}