【微信小程序】自定义组件 - 数据监听器

1. 什么是数据监听器

在这里插入图片描述
在这里插入图片描述

2. 数据监听器的基本用法

组件的 UI 结构如下:
在这里插入图片描述
组件的 .js 文件代码如下:
在这里插入图片描述

3. 监听对象属性的变化

在这里插入图片描述
在这里插入图片描述

数据监听器 - 案例

  1. 案例效果
    在这里插入图片描述

2. 渲染 UI 结构

在这里插入图片描述

3. 定义 button 的事件处理函数

在这里插入图片描述

4. 监听对象中指定属性的变化

在这里插入图片描述

5. 监听对象中所有属性的变化

在这里插入图片描述
在这里插入图片描述

我的代码

<!--components/rgb/rgb.wxml-->
<!-- <view class="colorBox" style="background-color:rgb({{rgb.r}},{{rgb.g}},{{rgb.b}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view> -->
<view class="colorBox" style="background-color:rgb({{fullColor}})">{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>
<button size="mini" bindtap="changR">R</button>
<button size="mini" bindtap="changG">G</button>
<button size="mini" bindtap="changB">B</button>
// components/rgb/rgb.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {rgb:{r:0,g:0,b:0},fullColor:''},/*** 组件的方法列表*/methods: {changR(){this.setData({'rgb.r':this.data.rgb.r<255?this.data.rgb.r+5:255})},changG(){this.setData({'rgb.g':this.data.rgb.g<255?this.data.rgb.g+5:255})},changB(){this.setData({'rgb.b':this.data.rgb.b<255?this.data.rgb.b+5:255})},},observers:{'rgb.**':function(newRgb){this.setData({fullColor:`${newRgb.r},${newRgb.g},${newRgb.b}`})console.log(this.data.fullColor);} }
})

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

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

相关文章

readpaper在读论文时候的默认规定

红色代表主旨思想 蓝色代表专业名词解析

【MySQL】 黑马 MySQL进阶 笔记

文章目录 存储引擎MySQL的体系结构存储引擎概念存储引擎特点InnoDBMyISAMMemory 存储引擎选择 索引概述结构B Tree(多路平衡查找树)B TreeHash为什么InnoDB存储引擎选择使用Btree索引结构? 分类思考题 语法SQL性能分析&#xff08;索引相关&#xff09;SQL执行频率慢查询日志p…

XSS game复现(DOM型)

目录 1.Ma Spaghet! 2.Jefff 3.Ugandan Knuckles 4.Ricardo Milos 5.Ah Thats Hawt 6.Ligma 7.Mafia 8.Ok, Boomer 1.Ma Spaghet! 通过简单的尝试发现传递参数可以直接进入h2标签 接下来我们尝试传入一个alert(1) 可以看到并没有触发。原因是在innerHTML中官方禁用了sc…

MySQL InnoDB引擎四大特性ACID实现方案分析

文章目录 概要InnoDb引擎ACID模型的实现方案小结 概要 对于Mysql&#xff0c;事物的支撑并不依赖于Server层&#xff0c;不同的存储引擎对于事物的支持也不一样&#xff0c;对于我们常用的InnoDB引擎&#xff0c;其提供了一套基于【ACID模型】的事物完整的解决方案。为什么MyIS…

【AI Agent极限挑战赛】三大赛题揭晓

由AIGC开放社区联合联想拯救者、英特尔共同主办的【2024 AI Agent极限挑战赛】于8月17日在上海中庚聚龙酒店成功举办。赛事全面考察参赛者将AI技术应用于实际问题的能力。比赛内容包括对大语言模型的理解、提示词&#xff08;Prompt&#xff09;的结构化调优技术、个人助理Agen…

如何使用ssm实现在线云音乐系统的设计与实现

TOC ssm042在线云音乐系统的设计与实现jsp 第1章 绪论 1.1背景及意义 系统管理也都将通过计算机进行整体智能化操作&#xff0c;对于在线云音乐系统所牵扯的管理及数据保存都是非常多的&#xff0c;例如用户管理、歌曲管理、推荐管理等&#xff0c;这给管理者的工作带来了巨…

基于华为昇腾910B和LLaMA Factory多卡微调的实战教程

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委,编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。授权多项发明专利。对机器学…

uniapp点击预览图片,两种效果

背景&#xff1a; 在使用uniapp框架中&#xff0c;我们对图片的展示需要点击放大展示(单张)&#xff1b;如果是多张图片&#xff0c;要支持左右滑动查看多张图片(多张)。 官网链接&#xff1a;点击跳转官网 一、单张&#xff0c;点击放大 代码&#xff1a; <template> …

Kubernetes服务发布基础

通过k8s的调度&#xff0c;我们可以成功的将服务部署到Kubernetes&#xff0c;应用部署后&#xff0c;最重要的就是对用户开放。 在传统的架构中&#xff0c;用户访问公司内的服务可能通过了多层代理、网关、防火墙等。在Kubernetes中&#xff0c;访问Kubernetes中的的应用同样…

Windows下使用QT5.14.2编译MySQL8.0对应的最新64位驱动程序步骤

不得不说mysql更新的速度是真的快&#xff0c;最近一两年都更新了好几个的小版本了。如果安装了高版本的 mysql软件&#xff0c;低版本的驱动就不支持了&#xff0c;因此需要重新使用QT来编译对应的mysql驱动。具体办法如下&#xff1a; 1、官网下载最新的mysql8.0安装包。下载…

ABAP 引用变量(TYPE REF TO )和字段符号(FIELD-SYMBOLS)全集

本文主要是记录了一些关于ABAP 引用变量(TYPE REF TO )和字段符号(FIELD-SYMBOLS)的相关内容&#xff0c;有些参考来自多个博客&#xff0c;以及官方文档 文章目录 FIELD-SYMBOLS字段符号官方文档Declaring Field SymbolsTyping Field Symbols 引用变量文章1引用变量介绍测试程…

Linux文件属性和打包压缩详解

1、文件属性体系 1.1 文件系统概述 [rootyunwei /]# ls -lhi 总用量 72K3505 lrwxrwxrwx. 1 root root 7 3月 7 2019 bin -> usr/bin 262152 dr-xr-xr-x. 5 root root 4.0K 12月 19 16:00 boot 399635 drwxr-xr-x 2 root root 4.0K 11月 5 2019 data1026 drw…

electron-vite封装UI级的消息提示

说明 Electron Vite Vue3 Element Plus Electron中写提示有两种方案&#xff1a; 系统级&#xff1a;electron带的dialog相关APIUI级&#xff1a;UI框架内部的提示&#xff0c;如ElMessage、ElMessageBox、ElNotification等 今天来封装一下UI级别的提示 代码 效果图 源…

冷却液温度传感器检测诊断

检测发动机冷却液温度&#xff0c;向ECU输入温度信号&#xff0c;作为燃油喷射和点火正时的修正信号&#xff0c;同时也是其他控制系统的控制信号。 冷却液温度传感器安装位置 冷却液温度传感器&#xff08;俗称水温传感器&#xff09;一般安装在缸体水道上&#xff0c;缸盖水…

知识竞赛答题设备及答题方式有哪些

根据我们多年的知识竞赛承办经验&#xff0c;我来谈谈在知识竞赛中常用的答题设备和答题方式。 一、常用答题设备 1.电脑 如果电脑资源充足&#xff0c;可以用笔记本电脑进行答题&#xff0c;笔记本电脑可以采取有线或无线方式进行连网&#xff0c;可以根据情况选择连网方案&…

利用GPT绘制流程图(无需下载任何软件

目录 什么是Flowchart Fun&#xff1f;如何利用GPT绘制流程图&#xff1f;步骤1&#xff1a;确定流程图的目的和内容步骤2&#xff1a;训练GPT编写流程图的文本描述步骤3&#xff1a;转换文本格式为可视化的流程图步骤4&#xff1a;调整和优化 结论小结&#xff1a; 什么是Flow…

Tomcat部署项目get请求中文乱码

问题描述 tomcat部署的项目&#xff0c;get请求到后端后&#xff0c;打印日志发现通过RequestParam()接收的参数值乱码。 问题猜测 编码错误导致的乱码。 流程梳理 浏览器发送请求时会自动对请求链接中自带的参数进行编码。编码时一般都是采用UTF-8的格式进行编码。请求到…

Ubuntu 22.04 某次重启后nvidia-smi 失效

Ubuntu 22.04 某次重启后nvidia-smi 失效 某次重启后失效&#xff0c;遂在网上寻找答案&#xff1a; 方案一&#xff1a;使用dkms进行安装相应模块 具体的可以参考链接 dkms 但是我试了一下并不好用&#xff0c;并且报错如下&#xff1a; Building module:cleaning build a…

token令牌,过滤器,JWT,拦截器

令牌(token)技术 不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了 1.基本流程 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一个token 客户端存储token&#…

探索大语言模型在DNA 分析到表达预测以及生物信息学应用

概述 论文地址&#xff1a;https://arxiv.org/abs/2401.04155 随着 OpenAI 的 GPT-X 和谷歌的 BERT 等大规模语言模型的出现&#xff0c;自然语言处理领域得到了飞速发展。这些先进的模型将理解和生成人类语言的能力发挥到了极致&#xff0c;彻底改变了日常交流和业务流程。 …