微信小程序-点击事件、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
    });
}
相关推荐
奇妙方程式5 小时前
微信小程序 地图 使用 射线法 判断目标点是否在多边形内部(可用于判断当前位置是否在某个区域内部)
微信小程序·小程序·地图
龙泉寺天下行走5 小时前
Python 翻译词典小程序
python·oracle·小程序
老华带你飞7 小时前
实习记录小程序|基于SSM+Vue的实习记录小程序设计与实现(源码+数据库+文档)
java·数据库·spring boot·小程序·论文·毕设·实习记录小程序
小新11018 小时前
微信小程序之按钮短时间内被多次点击问题
微信小程序·小程序
说私域18 小时前
O2O电商变现:线上线下相互导流——基于定制开发开源AI智能名片S2B2C商城小程序的研究
人工智能·小程序·开源·零售
说私域21 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序源码的去中心化商业扩散研究
人工智能·小程序·开源·去中心化·零售
不爱吃饭爱吃菜1 天前
uniapp微信小程序一键授权登录
前端·javascript·vue.js·微信小程序·uni-app
mon_star°1 天前
微信答题小程序支持latex公式显示解决方案
微信·小程序
MaCa .BaKa2 天前
38-日语学习小程序
java·vue.js·spring boot·学习·mysql·小程序·maven
HouGISer2 天前
副业小程序YUERGS,从开发到变现
前端·小程序