Vue2学习笔记(监视属性)

一、案例1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>监视属性</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>火箭发射开关:{{info}}</h2><button @click="changeWeather">开关按钮:开/关</button></div>
</body>
<script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:"#root",data:{isOn:true,},//计算属性computed:{info(){return this.isOn ? "开启" : "关闭"}},methods: {changeWeather(){//取反this.isOn = !this.isOn}},})
</script>
</html>

二、案例2

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>天气案例_监视属性</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 监视属性watch:1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在,才能进行监视!!3.监视的两种写法:(1).new Vue时传入watch配置(2).通过vm.$watch监视--><!-- 准备好一个容器--><div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{isHot:true,},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods: {changeWeather(){this.isHot = !this.isHot}},/* watch:{isHot:{immediate:true, //初始化时让handler调用一下//handler什么时候调用?当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}}} */})vm.$watch('isHot',{immediate:true, //初始化时让handler调用一下//handler什么时候调用?当isHot发生改变时。handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue)}})</script>
</html>

 

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

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

相关文章

【Datagear】关于Datagear目前发现的部分限制

【背景】 Datagear是一款非常不错的开源可商用BI分析平台&#xff0c;市面上大多数贩卖的BI平台能做的它基本都能做&#xff0c;不能做的也可以通过自己编辑JS甚至写后端服务实现&#xff0c;有完整的用户和权限管理系统内置&#xff0c;是很不错的低成本实现企业BI需求的平台…

html实现各种好看的鼠标滑过图片特效模板

文章目录 1.鼠标悬浮效果1.1 渐动效果1.2 渐变效果1.3 边框效果1.4 线行效果1.5 图标效果1.6 块状效果1.7 边线效果1.8 放大效果1.9 渐出效果1.10 痕迹效果1.11 交叉效果1.12 着重效果1.13 详展效果1.14 能动效果1.15 明细效果 2.主要源码2.1 源代码 源码下载 作者&#xff1a;…

Java-easyExcel入门教程

文章目录 前言一、简介二、使用步骤1. 引入依赖2. 前提准备3. 实现导出4. 实现导入 三、我所遇到的问题四、总结 前言 在日常开发中经常会遇到一些 excel 表导入导出的需求&#xff0c;以往会使用 POI 封装成工具类来处理这些导入导出的需求&#xff0c;但是 POI 在导入大文件…

Docker 环境中 Spring Boot 应用的 Arthas 故障排查与性能优化实战

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…

【零基础入门Docker】Dockerfile中的USER指令以及dockerfile命令详解

✍面向读者&#xff1a;所有人 ✍所属专栏&#xff1a;Docker零基础入门专栏 目录 第 1 步&#xff1a;创建 Dockerfile 第 2 步&#xff1a;构建 Docker 镜像 第 3 步&#xff1a;运行 Docker 容器 第 4 步&#xff1a;验证输出 dockerfile命令详解 最佳实践 默认情况下…

matlab 基于卡尔曼滤波的GPS-INS的数据融合的导航

1、内容简介 略 25-可以交流、咨询、答疑 2、内容说明 基于卡尔曼滤波的GPS-INS的数据融合的导航 "基于卡尔曼滤波的GPS-INS的数据融合的导航 基于卡尔曼滤波实现GPS-INS组合导航系统" 卡尔曼滤波、GPS、INS、数据融合、导航 3、仿真分析 4、参考论文 略 …

[github全教程]github版本控制最全教学------- 大厂找工作面试必备!

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…

如何精准操作无人机自动停机坪?

无人机自动停机坪通过自主导航和避障功能&#xff0c;实现了无人机的自主降落和起飞&#xff0c;在无人机技术领域起到了至关重要的作用。停机坪不仅仅是无人机的起降平台&#xff0c;还具备自动换电或充电等功能&#xff0c;为无人机的自动化提供了关键支持。为更有效地操作无…

ESP32-Web-Server编程-CSS 基础 2

ESP32-Web-Server编程-CSS 基础 2 概述 如上节所述&#xff0c;可以使用外部 CSS 文件来修饰指定的 HTML 文件。 外部引用 - 使用外部 CSS 文件。 当样式需要被应用到很多页面的时候&#xff0c;外部样式表将是理想的选择。使用外部样式表&#xff0c;就可以通过更改一个文件…

SQL Server 2016(基本概念和命令)

1、文件类型。 【1】主数据文件&#xff1a;数据库的启动信息。扩展名为".mdf"。 【2】次要&#xff08;辅助&#xff09;数据文件&#xff1a;主数据之外的数据都是次要数据文件。扩展名为".ndf"。 【3】事务日志文件&#xff1a;包含恢复数据库的所有事务…

python高级练习题库实验1(B)部分

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果题目4代码实验结果题目5代码实验结果题目总结题目1 打包糖果小游戏,用户输入糖果品牌与个数,还有一个盒子里面可以装多少个糖果,输出一些打印信息,如下图所示: 代码 print("Packaging lollies into…

CF1877 E. Autosynthesis 基环树dp

传送门:CF [前题提要]:一道基环树dp,但是题目有点绕,当时卡了我整整半天,到了第二天换了和清醒的脑子然后和别人讨论才整明白,故记录一下 题目很绕,故不再介绍. 首先对于这种下标和值有关系的题目.其实不难想到建图(CF上有大量这种 t r i c k trick trick),随便举个类似的题…

12月1日作业

代码整理&#xff0c;将学过的三种运算符重载&#xff0c;每个至少实现一个运算符的重载 #include <iostream>using namespace std;class Cloudy {friend bool operator!(const Cloudy &L,const Cloudy &R); private:int a; public:int b; public:Cloudy(){}Clo…

【Java】浅析FutureTask的核心方法get

前言 在进行多线程编程时&#xff0c;我们离不开两个重要的任务接口&#xff1a;Runnable、Callable。一个线程想要运行&#xff0c;首先它得知道它的任务是什么&#xff08;它要做什么&#xff09;&#xff0c;而这两个接口恰好是用于表示一个线程需要执行的任务。 Runnable和…

SHAP(三):在解释预测模型以寻求因果见解时要小心

SHAP&#xff08;三&#xff09;&#xff1a;在解释预测模型以寻求因果见解时要小心 与 Microsoft 的 Eleanor Dillon、Jacob LaRiviere、Scott Lundberg、Jonathan Roth 和 Vasilis Syrgkanis 合作撰写的关于因果关系和可解释机器学习的文章。 当与 SHAP 等可解释性工具配合…

MySQL 表分区原理详解

MySQL中的表分区是一种将表的数据按照某种规则划分成多个更小、更易于管理的部分的技术。表分区可以使得查询、维护和优化大表变得更加高效。每个分区都可以看作是独立的表&#xff0c;但对用户来说仍然是单一的表的透明访问。 分区原理 透明性: 对于应用程序来说&#xff0c;…

Java集合类的重要性

当谈到Java编程语言的强大功能时&#xff0c;集合类是一个不可忽视的关键组成部分。Java集合类为开发人员提供了一组丰富的数据结构和算法&#xff0c;用于有效地组织和操作数据。在本篇博客中&#xff0c;我们将深入探讨Java集合类的重要性、常见类型以及如何使用它们来提高代…

Mac 安装 Django 并连接 MySQL

一、下载安装运行Django看官方教程就好了&#xff0c;网址&#xff1a;Django 安装_w3cschool 二、连接MySQL&#xff08;我用的是pymysql和mysqlclient&#xff09;&#xff1a; 1、创建好项目后找到这个文件 2、修改当中的连接信息&#xff0c;将这些信息改成你自己的就好了…

2023-12-01 AIGC-自动生成ppt的AI工具

摘要: 2023-12-01 AIGC-自动生成ppt-记录 自动生成ppt: BoardMix boardmix 一键生成ppt boardmix是一款基于云的ai设计软件&#xff0c;允许创建用于各种目的的自定义演示文稿、ai绘画&#xff0c;ai生成思维导图等。以下是它的一些功能&#xff1a; 可定制的模板 - 它有一个…

Redis基本命令

文章目录 第1关&#xff1a;字符串、列表与集合第2关&#xff1a;哈希与有序集合第3关&#xff1a;Redis基本事务与其他命令 第1关&#xff1a;字符串、列表与集合 编程要求 根据提示&#xff0c;在右侧Begin-End区域补充代码&#xff0c;完成任务分配的后端处理逻辑&#xff…