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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/756852.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[项目设计]基于websocket实现网络对战五子棋

项目介绍 该项目旨在实现一个网页端的在线五子棋&#xff0c;将实现登陆、好友、房间、对战、观战、聊天等功能 完成该项目需要了解C、数据库MySQL、基础前端HTML/CSS/JS/Ajax、网络协议WebSocket 项目源码&#xff1a;azhe1/online_gobang - 码云 - 开源中国 (gitee.com) …

GPT系列模型的特点

GPT系列模型&#xff08;包括GPT-1、GPT-2和GPT-3&#xff09;都基于自回归Transformer架构。在设计上&#xff0c;这些模型的核心思想是利用自回归机制来捕捉整个序列的上下文信息。GPT系列模型通过其独特的自回归架构逐步地整合整个序列的完整语义。 自回归机制&#xff1a;…

静态页面负载均衡

如有两个节点xxx.xx.xxx.123、xxx.xx.xxx.456&#xff0c; 一、tomcat组件负载均衡 部署后端服务&#xff0c;启动tomcat即可启动服务。如123和456的8080端口上均部署了myTest服务&#xff0c;使用upstream直接代理即可。 upstream myTest_upstream {server xxx.xx.xxx.123:8…

配电站房安全AI识别-智能化安全监控的革命---豌豆云

配电站作为现代社会生活和工业活动的能源枢纽&#xff0c;起着至关重要的作用。它们确保电力的稳定供应&#xff0c;支持医疗、交通、通讯等多个关键领域的运作。 然而&#xff0c;随着城市化进程加快和电力需求激增&#xff0c;旧有的监控系统已经难以跟上现代化电网的步伐。…

图论01-DFS和BFS(深搜和广搜邻接矩阵和邻接表/Java)

1.深度优先理论基础(dfs) dfs的两个关键操作 搜索方向&#xff0c;是认准一个方向搜&#xff0c;直到碰壁之后再换方向 换方向是撤销原路径&#xff0c;改为节点链接的下一个路径&#xff0c;回溯的过程。dfs解题模板 void dfs(参数) {if (终止条件) {存放结果;return;}for …

R语言实现多要素偏相关分析

偏相关分析是指当两个变量同时与第三个变量相关时&#xff0c;将第三个变量的影响剔除&#xff0c;只分析另外两个变量之间相关程度的过程&#xff0c;判定指标是相关系数的R值。 在GIS中&#xff0c;偏相关分析也十分常见&#xff0c;我们经常需要分析某一个指数与相关环境参…

网络基础知识-DNS与DHCP+网络规划与设计故障诊断+嵌入式系统设计师备考笔记

0、前言 本专栏为个人备考软考嵌入式系统设计师的复习笔记&#xff0c;未经本人许可&#xff0c;请勿转载&#xff0c;如发现本笔记内容的错误还望各位不吝赐教&#xff08;笔记内容可能有误怕产生错误引导&#xff09;。 本章的主要内容见下图&#xff1a; 本章知识和计算机…

MNN createSession 之创建流水线后端(四)

系列文章目录 MNN createFromBuffer&#xff08;一&#xff09; MNN createRuntime&#xff08;二&#xff09; MNN createSession 之 Schedule&#xff08;三&#xff09; MNN createSession 之创建流水线后端&#xff08;四&#xff09; MNN Session::resize 之流水线编码&am…

python sqlalchemy操作mysql密码包含@特殊字符报错的解决方案

from sqlalchemy import create_engine userName ‘root’ password ‘xxxx163’ dbHost ‘127.0.0.1’ dbPort 3306 dbName ‘robot’ DB_CONNECT f’mysqlpymysql://{userName}:{password}{dbHost}:{dbPort}/{dbName}?charsetutf8’ engine create_engine( DB_CON…

B站python爬虫课程笔记(Q16-)

下面是学习的网址&#xff1a; ​​​​​​【Python爬虫】 16、捕捉异常try&except语句的一些问题 1&#xff09;一些常见的异常类型 IndexError索引错误ZeroDivisionError除零错误FileNotFindError找不到文件错误TypeError类型错误KeyError键错误ValueError值错误Ind…

「Linux系列」了解下Linux yum(包管理工具)

文章目录 一、yum简介二、yum语法1. 基本语法2. 常用选项&#xff08;options&#xff09; 三、yum常用命令1. 安装软件包2. 更新软件包3. 卸载软件包4. 搜索软件包5. 列出软件包6. 查看软件包信息7. 清理缓存8. 检查可用更新9. 自动应答yes案例代码案例1&#xff1a;安装Apach…

4.netsh wlan 查看无线网卡的属性?如何查看电脑支持WIFI5还是WIFI6?如何查看曾经电脑连过的WIFI密码呢?

目录 (1)netsh命令简介和用途 (2)netsh(针对网络接口)命令 1.netsh wlan set tracing mode=yes(开启无线追踪日志) 2.netsh wlan show drivers 查看电脑无线网卡属性(重点)支持WIFI6还是WIFI5

微信小程序 canvas层级过高覆盖原生组件

一、背景 微信小程序中使用signature第三方插件完成签名效果&#xff0c;但真机调试时发现canvas层级过高遮挡了按钮 二、具体问题 问题原因&#xff1a;签名后点击按钮无法生效 问题代码&#xff1a; <template><view class"sign_page" v-cloak>&l…

创建一个针对单个问题的GPT风格语言模型

标题&#xff1a;为单一问题创建类似GPT的语言模型 正文&#xff1a; 中国的研究人员开发了一种经济高效的方法&#xff0c;用于创建类似GPT-3的自然语言处理系统&#xff0c;同时避免了训练大规模数据集所需的时间和金钱成本——这一趋势日益增长&#xff0c;否则可能会将这…

51单片机学习笔记7 串转并操作方法

51单片机学习笔记7 串转并操作方法 一、串转并操作简介二、74HC595介绍1. **功能**&#xff1a;2. **引脚**&#xff1a;3. **工作原理**&#xff1a;4. 开发板原理图&#xff08;1&#xff09;8*8 LED点阵&#xff1a;&#xff08;2&#xff09;74HC595 串转并&#xff1a; 三…

Android Kotlin版封装EventBus

文章目录 Android Kotlin版封装EventBus代码封装添加依赖库定义消息类定义常量值定义注解定义工具类 使用在Activity中在Fragment中发送事件 源码下载 Android Kotlin版封装EventBus 代码封装 添加依赖库 implementation("org.greenrobot:eventbus:3.3.1")定义消息…

AIGC从入门到精通

目录 1. 概述 2. 一键起飞 2.1 webui 2.2 基础用法​​​ 2.3 必装插件 2.4 Stable Diffusion WebUI Forge 2.5 ComfyUI 2.6 Fooocus 2.7 diffusers 3 LoRA 3.1 原理 3.2 训练流程和准备 3.3 上手训练 4. 深入原理 4.1 使用教程 4.2 原理 4.3 训练阶段 4.4 …

蓝桥杯刷题|03普及-真题

[蓝桥杯 2017 省 B] k 倍区间 题目描述 给定一个长度为 N 的数列&#xff0c;​,,⋯&#xff0c;如果其中一段连续的子序列 ​,,⋯ (i≤j) 之和是 K 的倍数&#xff0c;我们就称这个区间 [i,j] 是 K 倍区间。 你能求出数列中总共有多少个 K 倍区间吗&#xff1f; 输入格式 …

Unix运维_FreeBSD-13.1临时环境变量设置(bin和include以及lib)

Unix运维_FreeBSD-13.1临时环境变量设置(bin和include以及lib) 在 FreeBSD 系统上设置用户环境变量可以通过编辑用户的 Shell配置文件 来实现。 cshrc 与 csh_profile 的区别: cshrc: 每个脚本执行前都执行一遍这个脚本。 csh_profile: 根据不同使用者用户名, 会先去其 home…

unity专题(1)背景图片的设置

众所周知&#xff0c;游戏是需要背景图片的。 假如说&#xff0c;我们下载了一个标准的1920*1080的背景图片&#xff0c;现在我们需要把他放游戏里并填满窗口&#xff0c;怎么做呢&#xff1f; 第一步、导入图片 直接将图片拖到Project窗口下的Assets目录&#xff0c;就算成…