zoukankan      html  css  js  c++  java
  • Vue的侦听器

    侦听器

    监听数据的变化

    watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。

    <!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>watch侦听器</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model.lazy="username">
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
    
            const vm = new Vue({
                el: '#app',
                data: {
                   username: ""
                },
                // 侦听器定义在watch节点下
                watch: {
                    // 侦听器本质上是一个函数,要监视哪个数据的变化,就把该数据作为方法名
                    username(newVal, oldVal) {
                        console.log(oldVal + '->' + newVal);
                    }
                }
            })
        </script>
    </body>
    </html>
    

    immediate选项

    <!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>对象格式侦听器</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model.lazy="username">
        </div>
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
    
            const vm = new Vue({
                el: '#app',
                data: {
                   username: "admin"
                },
                // 侦听器定义在watch节点下
                watch: {
                    // 定义对象格式的侦听器
                    username: {
                        // 侦听器的处理函数
                        handler: function(newVal, oldVal) {
    
                        },
                        // true 一进页面就会触发一次
                        // 选项默认值为false
                        immediate: true
                    }
                    
                }
            })
        </script>
    </body>
    </html>
    

    deep选项

    如果侦听的是一个对象,对象中的属性发生了变化,不会触发监听。这时可以通过deep选项,深度监听每一个对象中属性的变化。

    如果要侦听的是对象的子鼠星的变化,则必须包裹一层单引号

    'info.username'(newVal, oldVal) {}
    
  • 相关阅读:
    迭代是人,递归是神(迭代与递归的总结:比较)
    HMM(隐马尔科夫)用于中文分词
    Python 字典(Dictionary) get()方法
    jieba中文分词源码分析(四)
    一个隐马尔科夫模型的应用实例:中文分词
    小白给小白详解维特比算法(二)
    IOS 播放音频流媒体
    iOS开发之多媒体API(1)
    IOS流媒体播放
    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
  • 原文地址:https://www.cnblogs.com/Gazikel/p/15730981.html
Copyright © 2011-2022 走看看