zoukankan      html  css  js  c++  java
  • vue中实时监听对象或变量的变化

    demo中监听了Input的变化,主要用到的是watch

    1. 监听单个对象:

    <template>
      <div  class="personal-center">
        <input type="text" placeholder="请输入" v-model="inputVal"/>
      </div>
    </template>
    
    <script>
    
      export default {
        name: 'demo',
        data() {
          return {
            inputVal: ''
          }
        },
        watch: {
          inputVal(val, oldVal) {
            console.log("inputVal = " + val + " , oldValue = " + oldVal)
          }
        }
      }
    </script>

    具体页面展示:

    修改input的值之前:

    每一次修改input值都会监听到:

    2. 监听多个对象:

        data() {
          return {
            realName: '',
            idCard: '',
            isSubmit: false
          }
        },
        computed: {
          submitElement() {
            const {realName, idCard} = this
            return {
              realName,
              idCard
            }
          }
        },
        watch: {
          submitElement: {
            handler: function (val) {
              if (val.realName.trim().length > 0 && this.idCard.trim() > 0) {
                this.isSubmit = true
              } else {
                this.isSubmit = false
              }
            },
            deep: true
          }
        }
  • 相关阅读:
    开始研究web,mark一下
    干掉Unity3D
    mysql NDB
    mysql federated engine
    mysql memory
    mysql merge
    mysql innodb 引擎
    mysql myisam
    mysql 的日志文件
    mysql 的数据文件
  • 原文地址:https://www.cnblogs.com/miaoying/p/9425268.html
Copyright © 2011-2022 走看看