微信小程序(二)事件绑定

news2024/9/29 1:27:24

注释很详细,直接上代码

新增内容:

  1. 点击事件绑定
  2. 注册页面
  3. 设置页面初始化数据
  4. 事件处理函数的实现
  5. 更新数据并更新视图

源码:

index.wxml

<!-- 页面的数据绑定 -->
<view>{{msg}}</view>
<!-- 绑定点击事件 -->
<button type="primary" bind:tap="changemsg">点击修改</button>

index.js

//初始化页面
Page({
    //页面的初始数据
    //data是一个对象
    data:{
        msg:'Hello World'
    },

    //事件处理函数,修改文本
    changemsg(){
        //更新数据与视图
        this.setData({
            msg:'改变了'
        })
    }
})

效果演示:

  1. 按钮点击前
    在这里插入图片描述

  2. 按钮点击后
    在这里插入图片描述

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

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

相关文章

高防ip是什么,防护效果好吗

DDoS攻击是互联网最常见的网络攻击方式之一&#xff0c;通过大量虚假流量对目标服务器进行攻击&#xff0c;堵塞网络耗尽服务器性能&#xff0c;导致服务器崩溃&#xff0c;真正的用户无法访问。以前企业常用的防御手段就是高防服务器&#xff0c;也就是硬防&#xff0c;但由于…

【微信小程序独立开发1】项目提出和框架搭建

前言&#xff1a;之前学习小程序开发时仿照别人的页面自己做了一个商城项目和小说项目&#xff0c;最近突发奇想&#xff0c;想从0开发一个关于《宠物日记》的小程序&#xff0c;需求和页面都由自己设计&#xff0c;将在这记录开发的全部流程和过程中遇到的难题等... 1、搭建小…

MySQL夯实之路-查询性能优化深入浅出

MySQL调优分析 explain&#xff1b;show status查看服务器状态信息 优化 减少子任务&#xff0c;减少子任务执行次数&#xff0c;减少子任务执行时间&#xff08;优&#xff0c;少&#xff0c;快&#xff09; 查询优化分析方法 1&#xff0e;访问了太多的行和列&#xff1…

【教学类-43-18】A4最终版 20240111 数独11.0 十宫格X*Y=Z套(n=10),套用没有分割行列的A4横版模板

作品展示&#xff1a; 撑满格子的10宫格数独50%难度 50空 背景需求&#xff1a; 大4班有3位男孩做9宫格数独&#xff08;81格子&#xff0c;30%难度 24空&#xff09;非常娴熟&#xff0c;我观察他们基本都在10分钟内完成&#xff0c;其中一位男孩把九宫格题目给我看时表达自…

Windows安全基础:UAC

目录 UAC原理介绍 UAC的四个安全级别定义 UAC的触发条件 UAC用户登录过程 UAC虚拟化 配置UAC UAC原理介绍 用户账号控制&#xff08;User Account Control&#xff09; 为Windows Vista推出的一项安全技术&#xff0c;其原理是通过限制安全应用软件对系统层级的访问&…

从零到一保姆级深度学习Docker镜像配置教程

文章目录 前言一、Docker相关工具安装1.1 Docker安装和配置1.2 Nvidia-Docker安装1.3 Docker-Compose安装 二、深度学习环境Docker镜像配置2.1 基础镜像拉取与启动2.2 深度学习Docker环境配置2.2.1 更换软件源2.2.2 安装常见命令2.2.3 安装SSH2.2.4 安装Miniconda2.2.5 安装Pyt…

计算n的平方根m 进而将m向下取整 math.isqrt()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算n的平方根m 进而将m向下取整 math.isqrt() 选择题 请问执行math.isqrt(10)的运行结果是&#xff1a; import math print("【执行】math.sqrt(10)") print (math.sqrt(10)) pr…

thinkphp6报错Driver [Think] not supported.

thinkphp6报错Driver [Think] not supported. 问题解决方法测试 问题 直接使用 View::fetch();渲染模板报错 解决方法 这个报错是由于有安装视图驱动造成的 运行如下命令安装即可 composer require topthink/think-view官方文档中是这么写的 视图功能由\think\View类配合视…

视频SDK的技术架构优势和价值

为了满足企业对于高质量视频的需求&#xff0c;美摄科技推出了一款强大的视频SDK&#xff08;软件开发工具包&#xff09;&#xff0c;旨在帮助企业轻松实现高效、稳定的视频功能&#xff0c;提升用户体验&#xff0c;增强企业竞争力。 一、美摄视频SDK的技术实现方式 美摄视…

Flutter之配置环境创建第一个项目

随着时代发展&#xff0c;使用Flutter开发的项目越来越多&#xff0c;于是踏上了Flutter开发之路。 作为一个Android开发人员&#xff0c;也只能被卷到与时俱进&#xff0c;下面一起创建一个Flutter项目吧。 一、Android开发&#xff0c;电脑上已经具备了的条件&#xff1a; …

easyexcel上传校验的方法封装

easyexcel版本3.1.5 使用自定义注解的方式来定义校验的类型&#xff0c;避免冗余代码。 //校验value不能为空&#xff0c;且长度最大为30 RowCheck(value {RowCheckType.EMPTY,RowCheckType.LENGTH},max 30) private String value; 具体代码&#xff1a; 首先定义校验类型…

4.8 SUMMARY 4.9 EXERCISES

总之&#xff0c;在现代处理器中&#xff0c;程序的执行速度可能会受到内存速度的严重限制。为了很好地利用CUDA设备的执行吞吐量&#xff0c;应该在内核代码中获得高计算与全局内存访问率。如果获得的比率很低&#xff0c;则内核受内存约束&#xff1b;即其执行速度受从内存访…

Docker安装Elesticsearch7详细步骤

​ 1、创建安装目录 mkdir -p /usr/local/docker/es-docker 2、配置虚拟内存 如果不配置&#xff0c;后面启动es会报错。 max virtual memory areas vm.max_map_count [65530] is too low, increase to at least [262144] 配置如下 vi /etc/sysctl.conf vm.max_map_coun…

MySQL夯实之路-存储引擎深入浅出

innoDB Mysql4.1以后的版本将表的数据和索引放在单独的文件中 采用mvcc来支持高并发&#xff0c;实现了四个标准的隔离级别&#xff0c;默认为可重复读&#xff0c;并且通过间隙锁&#xff08;next-key locking&#xff09;策略防止幻读&#xff08;查询的行中的间隙也会锁定…

使用Navicat导入csv数据至mysql

问题 使用Navicat导入csv数据至mysql 详细问题 笔者有已进行数据处理的csv&#xff0c;需要将数据信息导入mysql中 解决方案 步骤1、建立数据表&#xff0c;字段信息&#xff08;最好&#xff09;与csv字段信息保持一致&#xff0c;方便后续导入。 具体的&#xff0c;双击…

WPS - 表格虚线变成实线解决方案(Office 同上)

1、选中表格区域&#xff0c;在表格中选中需要调整为实线的表格区域 2、点击设置单元格格式&#xff0c;鼠标进行右击并点击设置单元格格式选项 3、选择实线&#xff0c;在单元格格式下的边框&#xff0c;调整到实线 4、设置为实线&#xff0c;即可将表格的虚线设置为实线

Django(七)

Django(六) 4.编辑用户 点击编辑&#xff0c;跳转到编辑页面&#xff08;将编辑行的ID携带过去&#xff09;。编辑页面&#xff08;默认数据&#xff0c;根据ID获取并设置到页面中&#xff09;提交&#xff1a; 错误提示数据校验在数据库更新 user_edit.html {% exte…

JavaScript Web Worker用法指南

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 Web Worker可以将耗时任务放到后台执行,避免阻塞UI。本文将详细介绍Web Worker的用法,让你…

Spark原理——运行过程

运行过程 逻辑图 是什么 怎么生成 具体怎么生成 val textRDD sc.parallelize(Seq("Hadoop Spark", "Hadoop Flume", "Spark Sqoop")) val splitRDD textRDD.flatMap(_.split(" ")) val tupleRDD splitRDD.map((_, 1)) val reduceRD…

代币合约 ERC20 Token接口

代币合约 在以太坊上发布代币就要遵守以太坊的规则&#xff0c;那么以太坊有什么规则呢?以太坊的精髓就是利用代码规定如何运作&#xff0c;由于在以太坊上发布智能合约是不能修改和删除的&#xff0c;所以智能合约一旦发布&#xff0c;就意味着永久有效&#xff0c;不可篡改…