zoukankan      html  css  js  c++  java
  • vue之watch用法

    对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;

    //使用官方vue-cli脚手架书写
    <template>
      //观察数据为字符串或数组
       <input v-model="example0"/>
       <input v-model="example1"/>
      /当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数
       <input v-model="example2.inner0"/>
    </template>
    <script>
       export default {
          data(){
            return {
              example0:"",
              example1:"",
              example2:{
                inner0:1,
                innner1:2
              }
            }
          },
          watch:{
            example0(curVal,oldVal){
              console.log(curVal,oldVal);
            },
            example1:'a',//值可以为methods的方法名
            example2:{
             //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象
              handler(curVal,oldVal){
                console.log(curVal,oldVal)
              },
              deep:true
            }
          },
          methods:{
            a(curVal,oldVal){
              conosle.log(curVal,oldVal)
            }
          }
    }
    </script>

    个人博客传送门》》》》》

    能工摹形,巧匠窃意。
  • 相关阅读:
    解决运行vue项目的报错This relative module was not found:
    Iterator 迭代器
    Strategy 策略模式
    Observer 观察者
    工厂模式总结(简单工厂,工厂方法,抽象工厂)
    Abstract Factory 抽象工厂
    Factroy 简单工厂
    Singleton 多线程
    Singleton 单例模式
    设计模式总结
  • 原文地址:https://www.cnblogs.com/dupd/p/5887907.html
Copyright © 2011-2022 走看看