Vue监听器

最新推荐文章于 2024-07-04 18:31:50 发布

小源同学r

最新推荐文章于 2024-07-04 18:31:50 发布

阅读量2.8k

点赞数 6

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43216714/article/details/123026431

版权

Vue.js 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

watch : 在vue中表示监听的意思 , 我们可以使用watch来响应数据的变化

需求 :

定义三个数 firstNumber , lastNumber , fullNumber. 当firstNumber和lastNumber发生改变时 , fullNumber也随之发生改变

方式一 : 事件绑定

<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>

方式二 : 使用监听器

watch : 监听器 , 可以监听某个属性.

基本格式 : function(newVal , oldVal)

<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>