微信小程序-点击事件、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
    });
}
相关推荐
尘浮生3 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen6 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘10 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡13 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼16 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857518 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027719 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序