Vue监听器-CFANZ编程社区

方式一 : 事件绑定

<body>

  <div id="app">
    <input type="text" v-model="firstNumber" @keyup="handlerFullName">
    <input type="text" v-model="lastNumber" @keyup="handlerFullName">
    <input type="text" v-model="fullNumber">
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        firstNumber: '',
        lastNumber: '',
        fullNumber: ''
      },
      methods: {
        handlerFullName() {
          this.fullNumber = this.firstNumber + this.lastNumber
        }
      }

    })
  </script>
</body>

方式二 : 使用监听器

<body>

  <div id="app">
    <input type="text" v-model="firstNumber">
    <input type="text" v-model="lastNumber" >
    <input type="text" v-model="fullNumber">
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        firstNumber: '',
        lastNumber: '',
        fullNumber: ''
      },
      watch:{
        'firstNumber' : function(newVal , oldVal){
          this.fullNumber = newVal + this.lastNumber
        },
        'lastNumber' : function(newVal , oldVal){
          this.fullNumber = newVal + this.firstNumber
        }
      }

    })
  </script>
</body>