前端应用_Vue_计算案例-使用watch和keyup监听文本框数据的变化-CSDN博客

本文链接：https://blog.csdn.net/qq_34979346/article/details/99703099

我们想达到效果就是，当我在一个文本框输入1 ，在另一个文本框输入2 ，这个时候不需要点击任何button ，第三个文本框要显示3 ，

没有出发事件，就像达到两个值相加，关键点要用到的是监听文本框的数据。

下边我介绍两个方法，

第一个是 keyup 事件触发，当我抬起鼠标的时候就自动触发一个相加事件
第二个就是神奇的 watch 监听，他可以监听到新的值变化，推荐这个，比较灵活。

keyup

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='../../lib/vue-2.4.0.js'></script>
  <script src='../../vue-router-3.0.1.js'></script>
  <style>
  </style> 
</head>
<body>
  <div id="pp">
    <input type="text" v-model="arg1" >
    <input type="text" v-model="arg2" @keyup="getAdd">
    <input type="text" v-model="arg3" >
  </div>
 
  <script>
    new Vue({
      el:'#pp',
      data:{
        arg1:'',
        arg2:'',
        arg3:''

      },
      methods:{
        getAdd(){
          this.arg3=parseInt(this.arg1)+ parseInt(this.arg2)


        }
      },
    })
  </script>
</body>
</html>

watch 监听

监听的第一个参数是新的值，第二个是旧的

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='../../lib/vue-2.4.0.js'></script>
  <script src='../../vue-router-3.0.1.js'></script>
  <style>
  </style> 
</head>
<body>
  <div id="pp">
    <input type="text" v-model="arg1" >
    <input type="text" v-model="arg2">
    <input type="text" v-model="arg3"  >
  </div>
 
  <script>
    new Vue({
      el:'#pp',
      data:{
        arg1:'',
        arg2:'',
        arg3:''

      },
      
      methods:{
        },
      
      watch:{
        arg1: function(ol,nl){
          this.arg1=ol
        },
        arg2: function(ol,nl){
          this.arg2=ol
          this.arg3=parseInt(this.arg1)+parseInt(this.arg2)
        
        },
        arg3: function(ol,nl){
          this.arg3=parseInt(this.arg1)+parseInt(this.arg2)
          console.log(this.arg3)
         
        }

      }
    },
    )
  </script>
</body>
</html>