vue的computed计算属性,watch侦听器

最新推荐文章于 2024-06-14 15:25:30 发布

fan_xiao0529

最新推荐文章于 2024-06-14 15:25:30 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fan_xiao0529/article/details/89419330

本文详细介绍了Vue.js框架中双向数据绑定的实现机制，包括输入框与数据的同步更新，以及通过计算属性和侦听器实现的数据响应式变化。深入探讨了v-model指令在表单元素上的应用，计算属性的缓存机制与侦听器的功能区别。

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

<body>
       <div id="root">
           姓：<input v-model="firstName" />
           名:<input v-model="lastName" />
           <div>{{fullName}}</div>
       </div>
   </body>
   <script>
       new Vue({
           el:'#root',
           data:{
               firstName:'',
               lastName:'',
               count:0
           },
           computed:{
               fullName:function(){
                   return this.firstName+" "+this.lastName
               }
           },
           watch:{
               firstName:function(){
                   this.count++
               },
               lastName:function(){
                   this.count++
               },
               //或者
               fullName:function(){
                   this.count++
               },
           }
       });
   </script>