Vue监听器过滤器

Posted zhd09

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue监听器过滤器相关的知识,希望对你有一定的参考价值。

一:监听器

概述:watch监听器的用法相当于是我们监视一个数据的变化,在这个数据变化时执行一些操作,这个操作可以是任何操作

监听者里面有三个参数:

1.handler :function(newVal,oldVal){}   操作者 代表这个数据改变的时候执行什么操作 有两个参数 newVal (改变后的数据)oldVal(改变前的数据)

2.deep:false,   如果监听的是一个引用类型的数据(对象/数组),需要深度监听,true是深度监听,false是浅监听,默认是false

3.immediate:true, 实例创建的时候是否执行watch  为true时代表 监听的数据第一次被绑定的时候就开始监听。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>监听器练习</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="conten">
        <div>{{showconten}}</div>
        <button @click="obj.name=‘小红‘">改变数据</button>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                conten: "",
                obj: {
                    age: 12,
                    name: "小明"
                },
                num: 0

            },
            computed: {
                showconten() {
                    return "输入的内容是" + this.conten;
                }
            },
            watch: { //监听input框的变化情况
                //在input框每次输入内容的时候,这一行在后台都会打印值:改变后的数据---改变前的数据
                conten: { //定义在watch里的conten代表监控数据conten
                    handler: function(newVal, oldVal) { //操作者
                        console.log(newVal, "---", oldVal)
                    },

                },
                //监听对象中name属性
                obj.name: {
                    //刚刚进入页面时 数据没有改变,默认undefined,后台打印         小明 # undefined
                    //当点击改变数据的时候,后台打印        小红 # 小明
                    handler: function(newVal, oldVal) {
                        console.log(newVal, #, oldVal) 
                    },
                    deep: true, //深度监听,可以监听这个对象的某个属性比如说监听 ‘obj.name‘
                    immediate: true, //监听的数据第一次被绑定的时候就开始监听
                },
            }
        })
    </script>
</body>
</html>

此外:

监听器可以定义在实例外面,调用vm.$watch方法来进行数据监测.

第一个参数是监听的数据,第二个参数就是一个{}里面有三个参数(跟定义在实例里面的写法一样),也可写成简写形式(只有一个handler)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>监听器练习2</title>
</head>
<body>
    <div id="app">
        <button @click="num++">改变num</button>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            watch: {
            //如果一个监听器不需要deep和immediate参数的时候可以直接写handler
                num: function(newVal, oldVal) {
                    console.log(newVal, ===, oldVal)
                }
            }
        })
        vm.$watch("num", {
            handler: function(newVal, oldVal) {
                console.log(newVal, ====, oldVal)
            }
        })
        vm.$watch("num", function(a, b) {
            console.log(a, ===, b)
        })
    </script>
</body>
</html>

二:过滤器

概述:过滤器filters可以在插值语句和属性绑定v-bind的时候用 用法是 原本的值|过滤器,过滤器默认的第一个参数是你要过滤的数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过滤器练习</title>
</head>
<body>
    <div id="app">
        <p v-for="count in 4">{{count|add("")}}</p>  
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            // 局部过滤器
            filters:{
            //要过滤的是在每个数字后面加¥,写法如下
                add(msg,x){//msg是过滤的数据
                    console.log(msg)
                    return msg+x;
                },
            }
        })
    </script>
</body>
</html>

此外:局过滤器,在所有的实例里都能用,若全局跟局部过滤器重名的话,会优先使用局部的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过滤器全局写法</title>
</head>
<body>
    <div id="app">
        <img :src="src1|getimg" alt="">
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script type="text/javascript">
        //我们要的是../01.jpg,过滤如下:
        Vue.filter("getimg",function(msg){
            return "../"+msg;
        }) 
        var vm=new Vue({
            el:"#app",
            data:{
                src1:"01.jpg"
            }
        })
    </script>
</body>
</html>

 

以上是关于Vue监听器过滤器的主要内容,如果未能解决你的问题,请参考以下文章

三vue的过滤器侦听器及计算属性

Vue监听器过滤器

servlet,过滤器,监听器,拦截器的区别

VUE笔记3(绑定样式,计算属性,侦听器监听器,过滤器)

Vue侦听器和过滤器的应用

Vue 监听 Vuex 提交?