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