watch computed使用

电玩女神 2023-06-10 02:28 9阅读 0赞

<template>
      <div class="hello">
         <p>FullName: {
       {fullName}}</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>
    
    
    <style scoped>
    
    </style>

[https://blog.csdn.net/qq\_36688143/article/details/81287535][https_blog.csdn.net_qq_36688143_article_details_81287535]

[https_blog.csdn.net_qq_36688143_article_details_81287535]: https://blog.csdn.net/qq_36688143/article/details/81287535

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 computed watch 区别

computed computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作

偏执的太偏执、/ 2023年06月12日 14:30/ 0 赞/ 27 阅读

相关 watch computed使用

<template> <div class="hello"> <p>FullName: { {fullName}}</p>

电玩女神/ 2023年06月10日 02:28/ 0 赞/ 10 阅读

相关 Vue computed，watch本质区别

> 今日项目需要一个详细的权限配置，如：路由权限，页面tabs权限，操作权限；而路由权限大都知道就不赘述，而操作权限这就涉及页面中每个按钮了，这里使用VUEX进行管理 1.

小灰灰/ 2023年02月27日 13:45/ 0 赞/ 53 阅读

相关 computed、watch，方法的区别和使用

最近在看的一篇文章中一个面试官问一个面试人员：你知道computed watch 和方法的区别吗？他说自己不怎么用computed 和 watch，一般都用方法，面试官

梦里梦外;/ 2023年02月22日 13:34/ 0 赞/ 35 阅读

相关 watch和computed的区别

![70][] 页面中的数据改变的时候用watch的,实时计算的用computed [70]: /images/20220523/b9310840db104b3e85e8

ゝ一纸荒年。/ 2022年05月23日 12:29/ 0 赞/ 374 阅读

相关 vue computed和watch详解

1.概念 computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的，当依赖数据发生变化时，依赖此数据的相关数据会自动变化 2.应用场景

我不是女神ヾ/ 2022年05月20日 08:19/ 0 赞/ 296 阅读

相关 vue学习（五） watch computed

使用技术属性和监听属性会自带缓存，当依赖的属性发生变化时，才会重新生成 <table> <tbody> <tr> <td> <pre><code>&l

雨点打透心脏的1/2处/ 2022年04月22日 09:21/ 0 赞/ 236 阅读

相关 Vue之watch和computed

watch用于监控自身属性变化和监控路由对象计算属性computed的特点计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计

淩亂°似流年/ 2022年04月18日 01:30/ 0 赞/ 342 阅读

相关 vue的computed和watch联合使用

问题说明：这里使用计算属性获取`thirdAllItems`,这个得到的是所有的三级项指标。`thirdCurrentItems`是三级项的当前活动项，用于高亮。本来我

比眉伴天荒/ 2022年01月26日 07:15/ 0 赞/ 479 阅读

相关 Vue之computed与watch的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

电玩女神/ 2021年11月29日 17:06/ 0 赞/ 350 阅读