《前端》vue學習(五)(上)--監聽事件:keyup+`watch`+computed

想實現一個監聽事件

要求:輸入前兩個框,拼接得到第三個框的內容。

我們要監聽到 文本框數據的改變,這樣才能知道 什麼時候去拼接 出一個 fullname。如何監聽到 文本框的數據改變呢?

<body>
  <div id="app">
   <input type="text" name="" id="" v-model="firstname" @keyup="getfullname">
   <input type="text" name="" id="" v-model="lastname" @keyup="getfullname">
   <input type="text" name="" id="" v-model="fullname">
  </div>
  <script>
    var vm=new Vue({
      el:'#app',
      data:{
        firstname:'',
        lastname:'',
        fullname:''
      },
      methods:{
        getfullname(){
          this.fullname=this.firstname+'-'+this.lastname
        }
      }
    })
  </script>
</body>

還有種方法:

`watch`屬性的使用

使用這個 屬性,可以監視 data 中指定數據的變化,然後觸發這個 watch 中對應的 function 處理函數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章