zoukankan      html  css  js  c++  java
  • $watch和watch属性的使用

    $watch和watch属性都是监听值的变化的,是同一个作用,但是有两个不同写法。

    用法一:

    this.$watch((newVal,oldVal)=>{ })

    注意:这种方法是监听不到对象的变化的。

    用法二:

    watch:{
        xxx:(newVal,oldVal)=>{     // xxx是data里的数据
        
        }
    }

    监听对象某个值的变化 

    watch:{
        "xxx.value":(newVal,oldVal)=>{     // xxx.value是data里对象的value
        
        }
    }

    监听整个对象的变化(深度监听) ,handle方法:

      //深度监听
        obj:{
          handler(newVal,oldVal){
            
            
          },
        deep:true }

    例子:

    <template>
      <div>
        <input type="text" v-model="name">
        {{name}}
        <input type="text" v-model="age">
        {{age}}
        <input type="text" v-model="obj.id">
        {{obj.id}}
        <input type="text" v-model="obj">
        {{obj}}
      </div>
    </template>
    <script>
    export default {
      name: "Home",
      data() {
        return {
          name: "",
          age: "",
          obj: {
            id: "1",
            addr: "gz"
          }
        };
      },
      created() {
        this.obj = {
          id:"99",
          addr:"gd"
        }
        // 用法一:  this.$watch("要监听的值",(oldVal,newVal)=>{ })
        this.$watch("name", (newValue, oldValue) => {
          console.log(newValue + "_新值");
          console.log(oldValue + "_旧值");
        });
        //这样监听不到对象的变化的
        this.$watch("obj", (newval, oldval) => {
          console.log(newval);
          console.log(oldval);
        });
      },
      //用法二:
      watch: {
        age: (newValue, oldValue) => {
          console.log(newValue);
          console.log(oldValue);
        },
        // 监听对象中的某个属性的变化
        "obj.id":(newVal,oldVal)=>{
          console.log(newVal);
          console.log(oldVal);
          
        },
        //深度监听
        obj:{
          handler(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
            
          },
        deep:true } }, };
    </script> <style lang="css" scoped> </style>
  • 相关阅读:
    Apache HttpClient 4.3.6 API
    java中double的四舍五入 BigDecimal
    Java--获取request中所有参数的方法
    request.getSession(true)和request.getSession(false)的区别
    jquery插件分页
    Qt 之模型/视图(自定义按钮)
    在QTableView中使用各种自定义委托
    tableview setData 设置数据(结构体对象)
    libcurl 使用
    qt MessageBOX 消息
  • 原文地址:https://www.cnblogs.com/luguankun/p/10873813.html
Copyright © 2011-2022 走看看