computed，watch，filter的区别

最新推荐文章于 2023-03-14 11:19:09 发布

RyleeLouth

最新推荐文章于 2023-03-14 11:19:09 发布

阅读量713

点赞数

本文链接：https://blog.csdn.net/RyleeLouth/article/details/102753840

版权

computed

翻译过来是计算出来，意思是某个属性是依靠其他的模型变量进行得来的

<body>
<p>
//在这里插值的是computed里面的change函数
    <input type="text" v-model="username">{{ change}}
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
        //这里已经定义的模型变量不能在computed里面再定义一次，否则会报错
           username:''
        },
        computed:{
       //在这里change定义为一个函数，但是调用时为一个属性
            change(){
                if(!this.username){
                    return '用户名不能为空 '
                }
                if( this.username.length<=3){
                    return '用户名不能少于三位'
                }
                if(this.username.length>=10){
                    return '用户名不能超过十位'
                }
            }
        }
    })
//在这里change函数是依靠data中的username这个模型变量的变化进行得来的
</script>
</body>

watch

翻译过来是监视的意思，监视某个模型的变化

<body>
<p>
//这里插值的是变量信息
    <input type="text" v-model="username">{{ msg }}
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
           username:'',
            msg:''
        },
        watch:{
        //**这里的函数名必须是模型变量里面有的变量** 
            username(){
                if(!this.username){
                    this.msg='用户名不能为空'
                    return
                }
                if(this.username.length<=3){
                    this.msg='用户名不能小于三位'
                    return
                }
                if(this.username.length>=10){
                    this.msg='用户名不能超过十位'
                    return
                }
            }
        }
    })

</script>
</body>

总结一下：
由上面的例子我们知道了
1，computed与watch的使用方法不一样，
computed：在computed里面定义一个函数，这个函数会返回一个值，然后在插值表达式里面调用它，而且这里是函数的方式定义，属性的方式调用
watch：在watch中定义一个函数，但是在模型里面还要定义一个属性msg（名字随便取的），通过watch里面这个函数去改变msg的值，在插值表达式中调用msg
2，函数名不一样，computed里面定义的函数名不能使用模型变量里面已经有的，否则会报错，watch里面函数名必须是你要监视的那个变量，所以必须是data里面有的属性，
3，虽然最后用户看到的结果都是一样的，但是computed return返回一个值，watch是改变一个值，不过在日常需求下用两个其实没有太大的区别
4，但是如果存在异步函数，例如ajax，return就没有意义，但是其实我刚刚在上面做的表单验证都是前端的验证，真正的验证是要通过数据库查询该用户是否存在，这就一定要用到ajax，用到它就有了异步操作，这个时候return就没有意义了
这个时候computed就不再适用了，要使用watch这个方法

filter

翻译过来是过滤器的意思，负责数据的处理，也叫作变量调节器
vuejs 1.x版本中已经把内置的filter移除了，但是这个方法还是存在的，支持程序员自定义过滤器
1，vue 1.x里面的过滤器，先把1.x版本的vue引进来，在插值表达式中如下书写代码
{{ A| B }}，A的输出作为B的输入，B对A的输出做一些处理再输出
2，下面的例子中currency是将price保留两位小数，并且在前面加上$符号

<body>
<p>
    {{ price |currency }}
</p>
<script src="https://cdn.bootcss.com/vue/1.0.27/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
           price:2.32542332
        }
    })
</script>
</body>

vue 2.x中虽然没有内置的过滤器了，但是我们可以自定义
这里有两种过滤器，一种是全局过滤器，一种是局部过滤器
（1）全局过滤器

直接定义在Vue上，而且必须写在实例对象的前面
Vue.filter(参数一，参数二)，
------- 参数一：过滤器名称，必须加引号，
------- 参数二：是一个函数，是过滤器的实现代码，这个函数同样有两个参数，
---------------------参数一：是模型变量，也就是上一个的输出，
---------------------参数二：是其他参数，代表用户的传参

<p>
    {{ price |toFixed(2)}}//保留两位小数
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter('toFixed',(input,parmas)=>{
         return  input.toFixed(parmas)
     })
    var vm = new Vue({
        el: "p",
        data: {
           price:2.32542332
        }
    })

</script>
</body>

（2）局部过滤器

这个过滤器是写在vm控制器里面的，
toFixed（参数一，参数二）
------参数一：是模型变量，也就是上一个的输出，
------参数二：是其他参数，代表用户的传参

<body>
<p>
    {{ price |toFixed (2)}}//保留两位小数
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  
    var vm = new Vue({
        el: "p",
        data: {
           price:2.32542332
        },
         filters:{
             toFixed(input,parmas){
                 return  input.toFixed(parmas)
             }
        }
    })

</script>
</body>

RyleeLouth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed，watch，filter的区别

computed翻译过来是计算出来，意思是某个属性是依靠其他的模型变量进行得来的<body><p>//在这里插值的是computed里面的change函数 <input type="text" v-model="username">{{ change}}</p><script src="https://cdn.jsdeli...
复制链接

扫一扫