《前端》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 处理函数

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