微信小程序开发Js获取button的值并实时显示在input上

最新推荐文章于 2022-04-14 11:42:33 发布

HdLmj

最新推荐文章于 2022-04-14 11:42:33 发布

阅读量1k

点赞数 1

文章标签：小程序微信 javascript

本文链接：https://blog.csdn.net/weixin_52563089/article/details/120863185

版权

本文介绍了两种在HTML中绑定数据和处理点击事件的方法，通过`dataset`属性传递数据。方式一是使用`<button>`元素，方式二是使用`<view>`元素。在JS中，通过事件监听获取数据，并更新`<view>`元素显示的内容，实现输入实时显示。这些技术在前端开发中常用，特别是页面交互和数据绑定时。

摘要由CSDN通过智能技术生成

html代码

方式一

<button bindtap="numBtn"  class="bt" data-text="1">1</button>

方式二

<view hover-class="bg" bindtap="numBtn" data-val="1">1</view>

JS代码

方式一

  var num = e.target.dataset.text

方式二

var num = e.target.dataset.val

获取之后在input上实时显示

 <view class="result-num">{{num}}</view>

Page({
  data: {
    num:0,
  },
  numBtn:function(e){
  var num = e.target.dataset.val
      this.setData({
        num: this.data.num + num
      })
}
})