vue 多種方法實現名字拼接

第一種：v-modal綁定 綁定keyup事件 實時更新

<div>
      <input type="text" v-model="firstName" @keyup="getfullName"> +
      <input type="text" v-model="lastName" @keyup="getfullName"> =
      <input type="text" v-model="fullName">
</div>

<script>
export default {
  data () {
    return {
      firstName: " ",
      lastName: " ",
      fullName: " "
    }
  },
  methods:{
    getfullName(){
      this.fullName = this.firstName + this.lastName;
    }
  }
}
</script>

 

第二種：watch監聽

<div>
      <input type="text" v-model="firstName"> +
      <input type="text" v-model="lastName"> =
      <input type="text" v-model="fullName">
 </div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      firstName: " ",
      lastName: " ",
      fullName: " "
    }
  },
  watch:{
    firstName(){
       this.fullName = this.firstName + this.lastName;
    },
    lastName(){
       this.fullName = this.firstName + this.lastName;
    }
  }
}
</script>

watch 會監視 data 中指定的數據，當這些數據發生變動的時候會觸發對應的 function來處理相關的業務。

第三種： computed計算屬性

<div>
      <input type="text" v-model="firstName"> +
      <input type="text" v-model="lastName"> =
      <input type="text" v-model="fullName">
 </div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      firstName: " ",
      lastName: " ",
    }
  },
  
  computed:{
    fullName(){
      return this.firstName + this.lastName;
    }
  }
 
}
</script>

在 computed 中，可以定義一些 屬性，這些屬性，叫做 計算屬性， 計算屬性的本質，就是 一個方法，只不過，我們在使用 這些計算屬性的時候，是把 它們的 名稱，直接當作 屬性來使用的；並不會把計算屬性，當作方法去調用；

計算屬性，在引用的時候，一定不要加 () 去調用，直接把它 當作 普通 屬性去使用就好了；
只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 立即重新計算 這個 計算屬性的值
計算屬性的求值結果，會被緩存起來，方便下次直接使用； 如果 計算屬性方法中，所以來的任何數據，都沒有發生過變化，則不會重新對 計算屬性求值；
---------------------
版權聲明：本文為CSDN博主「波波烤鴨」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38526573/article/details/98762857