zoukankan      html  css  js  c++  java
  • watch监听器的基本使用

    1.watch监听器会监听data中数据的变化,只要一变化,就能够执行相应的逻辑
    2.监听的数据名放到这里面作为函数名,这个函数里面有两个参数,一个是新值,一个是旧值

        <div id="app">
            <input type="text" v-model="firstName">
            <input type="text" v-model="lastName">
            <h1>全名:{{fullName}}</h1>
        </div>
        <script>
          var vm = new Vue({
            el: '#app',
            data: {
              firstName: '',
              lastName: '',
              fullName: ''
            },
            watch: {
              firstName(newVal, oldVal) {
                console.log(newVal, oldVal)
                // 要用一个变量,将得到的数据保存起来
                this.fullName = newVal + this.lastName
              }, 
              lastName(newVal, oldVal) {
                setTimeout(() => {
                  this.fullName = this.firstName + newVal
                }, 200);
              }
            }
          })
        </script>
    

    与computed比较:

    • 对比computed而言,这个computed性能更好,所以能用computed实现就用computed实现。
    • 在涉及到异步数据操作的时候,就只能用watch去实现了。
  • 相关阅读:
    JZOJ 5870 地图
    20190921
    20190919
    SP703 SERVICE
    UVA323 Jury Compromise
    [note]一类位运算求最值问题
    [BZOJ3674]可持久化并查集
    [luogu3359]改造异或树
    [luogu4755]Beautiful Pair
    [BJWC2012]冻结
  • 原文地址:https://www.cnblogs.com/mushitianya/p/10510093.html
Copyright © 2011-2022 走看看