vue中的methods,filter,computed,watch

最新推荐文章于 2023-07-10 16:37:43 发布

kjl-37

最新推荐文章于 2023-07-10 16:37:43 发布

阅读量465

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56275924/article/details/121148942

版权

methods,filter,computed,watch都是vue中特有的针对数据进行不同方面处理的属性。

1.methods 方法

vue的中的methods属性是函数的容器

methods:{
   //可以放置多个函数，函数与函数之间使用逗号隔开
   handle：function(){},
   //常见的还有下面的这种写法
   handle(){}
}

2.filter 过滤器

vue中常用过滤器对一些数据进行格式化操作.下面这个是定义在局部的自定义过滤器。

<body>
    <div id="app">
        {{message|captialize}}
    </div>
//vue.js允许你自定义过滤器，被用作一些常见的文本格式化，由"管道符"指示 -->
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            message:'runoob'
        },
        // 过滤函数接受表达式的值作为第一个参数。
        // 以下实例对输入的字符串第一个字母转为大写
        filters:{
            captialize:function(value){
                if(!value) return '';
                value=value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
    })
</script>
</body>

定义在全局的全局过滤器

//vue项目的router文件中导入依赖包作用于全局
#导入包
yarn add js-num-format
# router
import {numberFormat} from 'js-num-format'
Vue.filter('jsNumformat',numberFormat);
#作用于数据
<div>
//数据和filter函数之间使用管道符隔开
<center>{{ msg| jsNumformat}}</center>
</div>

3.computed 计算属性

我们知道在{{ }}里面也可以进行数据的计算操作，但是这样会让渲染处看起来很冗杂，也不利于数据的多重使用，所以我们常用computed属性对数据进行处理操作。
关键：计算属性并不是把方法给保存了，而是会直接执行这个函数，并把函数的返回结果给保存下来。

<body>
    <div id="app">
        <p>原始字符串：{{message}}</p>
        <p>反转后的字符串：{{reveresedMessage}}</p>
    </div>
    <script>
        var vm=new Vue({
            el:'app',
            data:{
                msg:'lhh',
                message:'hello'
            },
            // 计算属性的getter
            computed:{
                  reveresedMessage:function(){
                //split是将字符串分割为一个一个字符，并返回一个数组
                //reverse 是将数组进行翻转，join和split相反将数组组合为字符串。
                    return this.message.split(''),reverse().join('');
                  },
           })
    </script>
</body>

可以使用methods来代替computed，效果上是一样的，但是computed是基于它的依赖缓存，只有相互依赖发生变化时才会重新获取值，而使用methods，再重新渲染的时候，函数总会从新调用执行。

4.watch 侦听器

作用：当渲染节点中的数据发生改变时触发侦听器。

<body>
    <div id="app">
        {{name}}
        {{user.age}}
        //改变name的值
        <input type="text" v-model="name">
    </div>
    <script >
        const vm=new Vue({
            el:'#app',
            data:{
                name:'dream',
                user:{
                    username:'1',
                    age:12,
                }
         },
         watch:{
   //监听的是name数据的值，函数中的默认两个参数是name的新值和旧值。
            name:function(newname,oldname){
           console.log(newname);
           console.log(oldname);
         },
   //若监听的数据是一个引用类型
             user:{
               deep:true,
   //这里的函数名必须是handler才行。
                handler(newV,oldV){
                //我们发现这两参数的值是一样的
                console.log("新",newV);
                console.log('旧',oldV);
           }
         }
      }
})
    </script>
</body>