微信小程序点击自加自减

自加自减

效果图

代码

wxml

<view>
<input type="text" bindinput="handinput" />
<!-- 写一个自定义属性来进行接收数据 -->
<!-- data-opter 1自定义的属性-->
<button  bindtap="handletap" data-opter="{{1}}">+</button>
<button  bindtap="handletap" data-opter="{{-1}}">-</button>
<view>{{num}}</view>
</view>

js

// pages/input/input.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
     num:0,
    },
    handinput(e){
    console.log(e)
    this.setData({
        num:e.detail.value//获取input 输入的值赋值给num
    })
    },
    handletap(e){
        // currentTarget.dataset.opter
        // 获取自定义的属性 
        const {opter}=e.currentTarget.dataset
        // const opter = e.currentTarget.dataset.opter
        this.setData({
            num:this.data.num+opter
        })
     console.log(e)
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})