首页 > 其他分享 >vue--day13--watch与computed的区别

vue--day13--watch与computed的区别

时间:2023-07-09 23:33:41浏览次数:39  
标签:vue computed val -- lastName watch firstName fullName

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>watch实现名字案例</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- commputed 与watch 之间的区别 1.computed能完成的功能 watch 都可以完成 2.watch能完成的功能,computed 不一定能完成,例如 watch 可以进行一步操作 两个重要的小原则 1.所被vue管理的函数,做好写成普通函数,这样this的指向才是vm 或者组件实例 2.所有不别vue管理的函数(定时器回调,ajax的回调函数 promise的回调函数)最好写成箭头函数这样 this的指向才是vm 或者组件实例 --> <div id="root"> <div>欢迎来带{{name}}学习</div> 姓:<input type="text" v-model="firstName" /><br /> 名:<input type="text" v-model="lastName" /><br /> 全名:<span>{{fullName}}</span><br /> </div> </body>
<script type="text/javascript"> const vm = new Vue({ el: "#root", data: { name: "尚硅谷", firstName: "张", lastName: "三", fullName: "张-三", }, watch: { firstName: function (val) { setTimeout(() => { this.fullName = val + "-" + this.lastName; }, 1000); }, lastName: function (val) { this.fullName = this.firstName + "-" + val; }, }, }); </script> </html>

标签:vue,computed,val,--,lastName,watch,firstName,fullName
From: https://www.cnblogs.com/satisfysmy/p/17539671.html

相关文章

  • 编译运行Secure Value Recovery Service v2
    下载项目gitclonehttps://github.com/signalapp/SecureValueRecovery2.git 编译makedockersh报错 修改DockerfileARGPROTOC_GEN_GO_GITREV=6875c3d7242d1a3db910ce8a504f124cb840c23aRUNgoenv-wGOPROXY=https://goproxy.cn,directRUNgoinstallgoogle.......
  • Django中migrate 出现问题
    问题:不小心删掉了数据库中的表格,重新迁移时出现如下问题 解决办法:1.在数据库中新建dashboard_piechart表2.运行pymanage.pymigratedashboardzero3.运行pymanage.pymigratedashboard查看数据库,新建了Model中的表格......
  • 【技术积累】数据结构中栈与队列及其相关算法【一】
    什么是栈栈是一种特殊的数据结构,它的各个元素按照一定的次序排列,且只能在表的一端(称为栈顶)进行添加和删除数据,这种数据结构遵循后进先出(LIFO)的原则。栈可以简单地理解为一种容器,它在使用时非常方便,因为只需在顶部压入(push)或弹出(pop)元素即可。栈可以直接使用数组或链表等数据结构......
  • 添加虚拟原点降低建图复杂度
    ##需求存在一个大小为$n$的点集$V_1$和大小为$m$的点集$V_2$,$V_1$中的每个点都需要向$V_2$中的每个点连一条边##$n*m$条边![](https://cdn.jsdelivr.net/gh/G-ghy/cloudImages@master/20211007155650.png)当$n$和$m$数值较大或者需要建图多次时,一定概率会超内存或者遍历时超......
  • Spring Cloud Gateway 设置全局接口访问日志
    SpringCloudGateway设置全局接口访问日志虽然网关只做转发,但是对于每个转发的请求,我们都希望能够在日志中打印出请求的信息,网上版本很多,踩了很多坑,目前没找到完美的解决方案,最后我这个应该是大成版。希望对大家有用。先贴代码,再说遇到什么坑吧。/***@authorchenzhangx*@d......
  • A011 《千变万化》编程 源码
    一、课程介绍本节课用嵌套for循环、input()获取用户输入、int()转换为整数类型,绘制一个由正多边形组成的花朵。二、重难点解析数据类型数据有类型区分,常用的有整数类型和字符串类型。像10、37、-17、0等数字就是整数类型;而'3'、'27'、'一语惊醒梦中人'、'yyjxmzr'等被引号......
  • 如何一次性查询多个快递单号的方法
    做电商的小伙伴们最近都对一个话题很感兴趣:如何批量查询快递单号?今天小编在这里给大家安利一款软件:固乔快递查询助手,它支持批量查询大量的快递单号,一起来看看批量查询的具体操作方法吧。小伙伴们需要先在“固乔科技”的官网上下载辅助软件“固乔快递查询助手”,这款软件采用官方的接......
  • 测试云服务器20230709
    最近使用虚拟服务器搭建了一台centos7,用来平时做个测试使用。有公网IP,带宽5M。在三丰云免费申请的截图配置可供大家参考一下。当使用三丰云的免费方案时,用户需要遵守三丰云的服务协议和使用规则,以确保服务的正常运行和数据的安全性。这些规定旨在保障所有用户的利益,并维护整个云平......
  • DjangoORM_choices字段get_字段_display()显示值
    示例:模型定义classmsg(models.Model):choice=((1,'技术部'),(2,'行政'),(3,'人事'),(4,"财务"),)group=models.IntegerField(choices=choice)想要获取元组的值,则使用下面的方法get_grou......
  • PostgreSQL-用户定义的函数
    PostgreSQL-用户定义的函数PostgreSQL是可扩展的,PostgreSQL服务器能够通过动态载入把用户编写的代码结合到自身中。也就是用户能够指定一个实现了新类型或函数的对象代码文件,并且PostgreSQL按要求载入它。主要讲的是查询语言函数与过程语言函数中的PL/pgSQL(SQL过程语言),其他......