当前位置: 首页 > news >正文

Vue 计算属性和监视属性

Vue 计算属性和监视属性

computed

computed 计算属性

规则:

  • 用已有的属性计算不存在的属性
  • 默认调用一次get()
  • 只有值不发生改变的时候才可以使用简写(函数);值发生改变 使用对象式写法,才可以配置set()方法
  • 底层原理使用 object.definProperty(目标对象,键名,{})
<div id="app"><input type="text" v-model="fullName"><input type="text" v-model="Names"></div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},computed: {//标准写法 对象式Names: {get() {console.log("get被调用了");return 99;},set(value) {console.log(value);console.log("set被调用了");}},//简写写法 函数式  没有set值fullName() {console.log("简写的计算方法触发");return 99;}}})

watch

watch 监视属性

规则:

  • 监视已存在的属性
  • mmediate:true 默认调用一次,false不会
  • 只有handler方法可以简写;写法:监视的属性(新值,就值){}
  • 监视对象中的值需要深度监视.使用deep:true
<div id="app"><h1>今天的天气{{weather}}</h1><h2>{{user}}</h2><h2>{{obj.id}}</h2><button @click="func()">切换天气</button></div>
 Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {bool: true,user: "",obj: {id: 99}}},methods: {func() {this.bool = !this.bool;}},computed: {weather() {return this.bool ? "炎热" : "凉爽";}},watch: {bool: {immediate: true,deep:true,handler(newValue, oldValue) {console.log('-------bool--------');console.log(newValue);console.log(oldValue);if (newValue== true) {this.user = "张三";} else {this.user = '李四'}}},obj: {immediate: true,deep: true, //开启深度监视handler(newValue, oldValue) {console.log('-------obj--------');console.log(newValue);console.log(oldValue);}}//简写// weather(newValue, oldValue) {//     console.log(newValue);//     console.log(oldValue);//     console.log(this);// }},})

在这里插入图片描述

这是watch的另一种写法 ,写在实例化之外

vm.$watch("user", {immediate: false,deep: false,handler(newValue, oldValue) {console.log(newValue);console.log(oldValue);console.log(this);}})

在这里插入图片描述


  • 失联

最后编辑时间 2024,03,19;17:31

相关文章:

Vue 计算属性和监视属性

Vue 计算属性和监视属性 computed computed 计算属性 规则&#xff1a; 用已有的属性计算不存在的属性默认调用一次get()只有值不发生改变的时候才可以使用简写&#xff08;函数&#xff09;&#xff1b;值发生改变 使用对象式写法&#xff0c;才可以配置set()方法底层原理使…...

【Python】反编译PyInstaller打包的exe

查看exe基本信息 需要反编译的exe 查看exe文件的打包工具&#xff0c;查看exe信息的软件叫Detect It Easy(查壳工具) 由图我们可以看出当前选中的exe文件是由名叫PyInstaller的打包工具打包好的exe 反编译 exe反编译工具&#xff1a;pyinstxtractor.py 使用方法 python py…...

【数据结构】哈希表与哈希桶

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.概念 2.哈希冲突…...

幼儿教育管理系统|基于jsp 技术+ Mysql+Java的幼儿教育管理系统设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…...

【赠书第21期】游戏力:竞技游戏设计实战教程

文章目录 前言 1 竞技游戏设计的核心要素 1.1 游戏机制 1.2 角色与技能 1.3 地图与环境 2 竞技游戏设计的策略与方法 2.1 以玩家为中心 2.2 不断迭代与优化 2.3 营造竞技氛围与社区文化 3 实战案例分析 4 结语 5 推荐图书 6 粉丝福利 前言 在数字化时代的浪潮中&…...

基于VMware虚拟机安装MacOS BigSur系统

这周用VMWare搞了个MacOS虚拟机&#xff0c;也算是完成初中高中时候的梦想了吧~~&#xff08;那时候我的电脑配置还很拉跨&#xff0c;带不动虚拟机&#xff09;~~ 写一篇博客记录一下&#xff0c;当然这也是yonagi04.github.io建站的第一篇新博客 准备工作&#xff08;VMWare…...

C++特性三:多态的基本语法及原理剖析

一、多态的基本语法 多态分为两类 静态多态: 函数重载 和 运算符重载属于静态多态&#xff0c;复用函数名 动态多态: 派生类和虚函数实现运行时多态 静态多态和动态多态区别&#xff1a; 静态多态的函数地址早绑定 - 编译阶段确定函数地址 动态多态的函数地址晚绑定 - 运…...

Windows下的TCP/IP实例

1.注意事项 windows下winsock.h/winsock2.h linux下sys/socket.h 不同平台头文件不一样 #include <winsock.h> 或者 #include <winsock2.h> 2. 安装minGW 目标是在 Windows 环境下提供类似于 Unix/Linux 环境下的开发工具&#xff0c;使开发者能够轻松地在 Wind…...

硬件学习件Cadence day15 allegro 查看state 后发现有网络未连接怎么办, shape 有问题怎么办,

1. 当我们查看 state 有问题怎么解决 1. 有问题的图片 2.解决办法&#xff1a; A.网络和节点有问题 如下图所示&#xff0c;点开下面这个窗口进行下面操作&#xff0c;能简单的网络未连接问题。 如下图所示&#xff0c;能进一步解决更难得网络节点未连接问题 如下图所示&#x…...

nginx 中 user 配置的作用

在 Nginx 配置文件中&#xff0c;user 指令用于指定 Nginx 运行时所使用的用户和用户组。默认情况下&#xff0c;Nginx 会以 nobody 用户的身份运行(即使使用 root 用户运行nginx进程, nginx运行过程中线程的用户还是用的nobody)&#xff0c;这是一个低权限用户&#xff0c;专门…...

愚人节礼物(C++)

这不愚人节 快到了吗&#xff1f;身为顶级程序员&#xff0c;不用c编写愚人节礼物那心里是很不舒服的&#xff0c;所以&#xff0c;趁着愚人节到来之际&#xff0c;下面分享一种坑朋友的c代码&#xff1a; 内容包含一些敏感词&#xff0c;如果对你产生了影响或伤害&#xff0c;…...

Lua 学习

参照 注释 -- 这是单行注释--[[这是多行注释--]]if语句 if true thenprint(true) endif else语句 nil是false if nil thenprint("nil被当作true处理") elseprint("nil被当作false处理") end运算符 % 取余 ^ 乘幂 A10,A^2100 // 整除运算符&#xff0…...

YOLOv7 | 添加GSConv,VoVGSCSP等多种卷积,有效提升目标检测效果,代码改进(超详细)

⭐欢迎大家订阅我的专栏一起学习⭐ &#x1f680;&#x1f680;&#x1f680;订阅专栏&#xff0c;更新及时查看不迷路&#x1f680;&#x1f680;&#x1f680; YOLOv5涨点专栏&#xff1a;http://t.csdnimg.cn/QdCj6 YOLOv7专栏&#xff1a; http://t.csdnimg.cn/dy…...

『运维心得』BPC-EPM-AddIn专家看过来

目录 系统版本问题 安装顺序问题 framework问题 vstor_redis问题 dll问题 一个小彩蛋 总结 最近在搞BPC&#xff0c;安装Office所需的EPM-AddIn的过程中&#xff0c;碰到了一些奇怪的问题。 查了BPC专家提供的安装说明文档&#xff0c;文档里要么没有提到我们碰到的问题…...

论文浅尝 | GPT-RE:基于大语言模型针对关系抽取的上下文学习

笔记整理&#xff1a;张廉臣&#xff0c;东南大学硕士&#xff0c;研究方向为自然语言处理、信息抽取 链接&#xff1a;https://arxiv.org/pdf/2305.02105.pdf 1、动机 在很多自然语言处理任务中&#xff0c;上下文学习的性能已经媲美甚至超过了全资源微调的方法。但是&#xf…...

Rust语言:告诉编译器允许存在未使用的代码(Rust保留未使用的实现)

Rust告诉编译器允许存在未使用的代码(Rust保留未使用的实现) Rust的Lint工具clippy clippy是一个Rust的Lint工具&#xff0c;旨在帮助开发者发现并改进代码中的潜在问题。它提供了许多静态代码分析的规则和建议&#xff0c;以提高代码质量和可读性。其中就包括检查未使用的代…...

Winform数据绑定

简介# 在C#中提起控件绑定数据&#xff0c;大部分人首先想到的是WPF&#xff0c;其实Winform也支持控件和数据的绑定。 Winform中的数据绑定按控件类型可以分为以下几种&#xff1a; 简单控件绑定列表控件绑定表格控件绑定 绑定基类# 绑定数据类必须实现INotifyPropertyChanged…...

DeprecationWarning: currentThread() is deprecated, use current_thread() instead

解决方案&#xff1a; # auto_commit not getattr(threading.currentThread(), testing, False) #阙辉注释 auto_commit not getattr(threading.current_thread(), testing, False) #阙辉新增...

2024届 C++ 刷题 笔试强训 Day 03

选择题 01 以下程序的输出结果是&#xff08;&#xff09; #include <stdio.h> void main() {char a[10] {1, 2, 3, 4, 5, 6, 7, 8, 9, 0}, *p;int i;i 8;p a i;printf("%s\n", p - 3); }A 6 B 6789 C ‘6’ D 789 题目解析&#xff1a; 题目中定义了一个…...

linux用git拉取我云端以及git处理冲突

拉取后切换一个跟云端分支(dev)一样的 git branch --set-upstream-toorigin/dev dev 之后就同步了 A在dev分支写了iii,提交 B在dev分支写了hhh,提交,冲突 怎么修改,B把云端的拉下来,随便改改就行...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...