watch computed使用

最新推荐文章于 2024-09-23 10:45:16 发布

原创最新推荐文章于 2024-09-23 10:45:16 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

33 篇文章

订阅专栏

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

<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.youkuaiyun.com/qq_36688143/article/details/81287535