watch computed使用

键盘捕手

于 2019-10-25 14:10:48 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42312074/article/details/102742009

vue 专栏收录该内容

33 篇文章

订阅专栏

本文详细解析了Vue中数据绑定的实现方式，包括使用v-model进行双向数据绑定，以及通过watch监听数据变化来更新视图的过程。同时，讨论了如何在数据变化时执行特定操作，确保视图与数据的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="hello">
     <p>FullName: {{fullName}}</p>
     <!-- <p>Fullname:{{fullName0}}</p> -->
     <p>FirstName: <input type="text" v-model="firstName"></p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      firstName: 'Dawei',
      lastName: 'Lou',
      fullName: ''

    }
  },
  computed:{
    fullName0(){
      return  this.firstName +''+this.lastName;
    }
  },

  //缺陷，最初的绑定时候是不会执行的，需要firsrName的值发生改变才会执行
   watch: {
    firstName(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    }
  },

  //handler方法和immediate 改进上面的 最初开始绑定的时候也执行
    watch: {
    firstName: {
      handler(newName, oldName) {
        this.fullName = newName + ' ' + this.lastName;
      },
      immediate: true
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

https://blog.csdn.net/qq_36688143/article/details/81287535