Vue监听（watch）过滤器（filters）

y17757773039

已于 2022-10-30 15:41:13 修改

阅读量901

点赞数

文章标签： vue.js javascript 前端 1024程序员节

于 2022-09-08 17:20:27 首次发布

本文链接：https://blog.csdn.net/y17757773039/article/details/126768331

版权

四、监听
1、watch：观察、监听
2、watch选项表示：监测data选项中的数据变化
3、watch选项的值:对象，对象中定义方法
4、应用场景：数据变化同时进行异步操作或者比较大的开销时
5、注意：watch是监测data的数据变化，watch的方法必须是已存在属性
6、简写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<!-- watch监听 -->
<body>
    <div id="app">
        <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
        <div><input type="text" v-model="cityname"/></div>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data:{
                cityname: 'shanghai'
            },
            watch:{
                cityname(newName,oldName){
                    console.log(newName,oldName)
                }
            }
        })
    </script>
</body>
</html>

7、页面：
input框输入值，回车，watch监听到，控制台输出。
控制台直接修改值，watch监听到，控制台输出。
在这里插入图片描述
细节补充：监听的两种写法
第一种

<body>
    <div id="app">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isHot: true,
            },
            computed:{
                //属性
                info(){
                    return this.isHot? '炎热':'寒冷'
                }
            },
            methods:{
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                //1、watch中监听的必须是已存在属性，如下data中的isHot属性
                isHot:{
                    immediate:true,//初始化时，调用一次handler方法
                    //当isHot改变时，触发handler方法，应用场景：监听温度，新温度减旧温度，温差过大，则提醒穿衣服
                    handler(newName,oldName){
                        console.log(newName,oldName);
                    }
                }
            }
        })
    </script>
</body>

在这里插入图片描述

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isHot: true,
            },
            computed:{
                //info属性，判断isHot属性为true，返回值'炎热'，否则'寒冷'
                info(){
                    return this.isHot? '炎热':'寒冷'
                }
            },
            methods:{
                //changeWeather方法，改变isHot属性值，true和false来回改变
                changeWeather(){
                    this.isHot=!this.isHot
                }
            }
        })
        
        //2、watch中监听的第二种写法，监听如下计算属性info属性
        vm.$watch('info',{
                //初始化时，执行一遍handler属性
                immediate:true,
                //当isHot改变时，触发handler方法
                handler(newName,oldName){
                    console.log(newName,oldName);
                }
        })

    </script>
</body>
</html>

在这里插入图片描述
深度监听：当遇到多级结构属性时，Vue提供的watch方法默认无法监听到。需要配置deep:true开启深度监听，才行。

<body>
    <div id="app">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <button @click="number.a++">a</button>
    </div>

    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isHot: true,
                number:{
                    a:1,
                    b:2
                }
            },
            computed:{
                //属性
                info(){
                    return this.isHot? '炎热':'寒冷'
                }
            },
            methods:{
                changeWeather(){
                    this.isHot=!this.isHot
                }
            },
            watch:{
                //1、watch中监听的必须是已存在属性，如下data中的isHot属性
                isHot:{
                    immediate:true,//初始化时，调用一次handler方法
                    //当isHot改变时，触发handler方法，应用场景：新温度减旧温度，温差过大，则提醒穿衣服
                    handler(newName,oldName){
                        console.log(newName,oldName);
                    }
                },
                number:{
                    //开启深度监听，才能监听多级结构属性！！（比如:当前number属性）若不开则无法监听到
                    deep:true,
                    handler(){
                        console.log('number改变了');
                    }
                }
            }
        })
    </script>
</body>

在这里插入图片描述

五、过滤器
1、filters：过滤器
2、filters选项表示：对data选项中的数据进行格式化
3、filters选项的值：对象，对象中定义方法
4、应用场景：对数据格式化（日期格式化、字母大小写转换）
5、注意：
首先，过滤器函数，必须定义一个参数，此参数就是使用过滤器的数据
其次，将格式化的结果返回
6、过滤器的使用：
第一种，插值表达式：{{data属性名 | 过滤器名称}}
第二种，属性绑定使用：v-bind：id=‘data属性名 | 过滤器名称’
7、代码：

第一种，属性message使用名为toUpcase的过滤器

<body>
    <!-- 1、filters过滤器，语法{{data | filter}}
     2、    | 将管道符之前代码执行结果会传到后面作为参数进行处理    -->
    <div id="app">{{message | toUpcase}}</div>
    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                message: 'helloworld'
            },
            filters: {
                toUpcase(value){
                    //将小写的helloworld转为大写
                    return value ? value.toUpperCase(): ''
                }
            
            }
        })
    </script>
</body>

页面：
data中是小写，但经过fillter的toUpcase显示大写
在这里插入图片描述

第二种，属性dataId使用名为formatId过滤器，将id值dff1变为f0

<body>
    <!-- 1、v-bind用于属性绑定 v-bnd:id=“data” 表示绑定id属性，值为data
     2、    语法 “data | filters”   -->
    <div id="app">
        <div v-bind:id="dataId | formatId">helloworld</div>
    </div>

    <script>
        var vm=new Vue({
            el: '#app',
            data: {
                dataId: 'dff1'
            },
            filters: {
                formatId(value){
                    //字符串处理，charAt(1)显示字符串坐标1字符，indexOf('d')显示d字符串坐标
                    return value ? value.charAt(1)+value.indexOf('d') : ''
                }
            
            }
        })
    </script>
</body>