微信小程序-点击事件、text标签赋值

点击事件

  • 设置(bindtap)和监听
html 复制代码
<button class="key" bindtap="keyClick" data-value="1">1</button>
javascript 复制代码
Page({
  keyClick: function (e) {
    const value = e.currentTarget.dataset.value;
  },
})

text标签赋值

在微信小程序中,要给指定的<text>标签设置值,可以通过以下步骤实现:

  • 获取<text>标签的ID:首先确保你的<text>标签具有唯一的ID属性。
html 复制代码
<text id="myText">默认文本</text>
  • 设置<text>标签的值:在微信小程序中,不能直接修改<text>标签的文本内容。你需要使用数据绑定的方式来实现。首先,在Page的data对象中定义一个变量,例如myTextValue。
javascript 复制代码
Page({
  data: {
    myTextValue: '默认文本',
  },
  // ...
});
  • 然后,在<text>标签中使用{``{}}将变量绑定到<text>标签的文本内容。
html 复制代码
<text>{{myTextValue}}</text>
  • 修改<text>标签的值:在需要修改<text>标签的文本内容时,只需修改data对象中的myTextValue变量即可。
javascript 复制代码
this.setData({
    myTextValue: '新的文本内容',
});

//点击事件中动态修改

keyClick: function (e) {
    const value = e.currentTarget.dataset.value;
    this.setData({
      input: this.data.myTextValue + value
    });
}
相关推荐
zy happy2 小时前
RuoyiApp 在vuex,state存储nickname vue2
前端·javascript·小程序·uni-app·vue·ruoyi
云起SAAS4 小时前
黄历万年历择吉日抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·黄历万年历择吉日
2501_915918415 小时前
HTTP抓包工具推荐,Fiddler使用教程、代理设置与调试技巧详解(含HTTPS配置与实战案例)
http·ios·小程序·https·fiddler·uni-app·webview
一 乐8 小时前
个人理财系统|基于java+小程序+APP的个人理财系统设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·后端·小程序
腾讯云云开发9 小时前
小程序数据库权限管理,一看就会!——CloudBase新手指南
前端·数据库·微信小程序
有点笨的蛋10 小时前
从零搭建小程序首页:新手也能看懂的结构解析与实战指南
前端·微信小程序
一只小白菜~11 小时前
记录一下微信小程序里使用SSE
微信小程序·小程序·sse·小程序sse·小程序eventsource
小小王app小程序开发11 小时前
家政小程序拓展分析:从工具型产品到全链路服务生态的技术落地与商业破局
小程序
上海云盾安全满满11 小时前
APP小程序被攻击了该如何应对
网络·小程序
李慕婉学姐11 小时前
【开题答辩过程】以《基于微信小程序垃圾分类图像识别技术实现》为例,不会开题答辩的可以进来看看
spring boot·微信小程序·vue