zoukankan      html  css  js  c++  java
  • Vue之watch监听

    应用场景
    1、监听文本框数据的变化
    2、监视路由地址的改变

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    
    <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname">=
        <input type="text" v-model="fullname">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                fullname: ''
            },
            methods: {},
            watch:{
                // 使用这个属性,可以监视data中指定数据的变化,然后触发这个watch中对应的function处理函数
                // first_name这种形式的变量就需要使用引号括起来
                'firstname':function (newVal, oldVal) {
                    // console.log('监视到了 firstname 的变化')
                    this.fullname = this.firstname + '-' + this.lastname;
                },
                'lastname':function (newVal, oldVal) {
                    this.fullname = this.firstname + '-' + this.lastname;
                }
            }
        })
    </script>
    </body>
    </html>
    

    watch表示:它是Vue的一个属性,可以进行监视data中指定数据的变化,然后触发对应的function处理函数
      特别注意:this.firstname后面不要带括号,否则会报错!!!!!
      它有两个变量,newVal表示变化后的值,oldVal表示变化前的值
    属性的命名:first_name像这种带下划线的就必须使用引号括起来

  • 相关阅读:
    共享内存
    文件IO函数和标准IO库的区别
    链表程序
    flash_header.S ( freescale imx6 board)
    深入理解二维数组
    putchar和puts
    指针目标
    C语言:break和continue
    C语言:输入输出
    python lambda
  • 原文地址:https://www.cnblogs.com/myfaith-feng/p/12741164.html
Copyright © 2011-2022 走看看