微信小程序学习笔记2

目录

1，运算

2，列表渲染

3，条件渲染

4，事件绑定

​ 需求 1 输入框输入什么，下面显示什么

 需求2，点击加号按钮使数字加一，点击减号按钮使数字减一

---

1，运算

2，列表渲染

3，条件渲染

 

4，事件绑定

 需求 1 输入框输入什么，下面显示什么

 需求2，点击加号按钮使数字加一，点击减号按钮使数字减一

 money.wxml

<!-- 1,需要给input标签绑定 input事件 当数值改变就会触发
需要绑定关键字 bindinput 
    2,如何获取输入框的值e.detail.value
    3,把输入的值赋值到data当中
    this.setData({
        num:e.detail.value
    })
4,需要加入一个点击事件      1，bintap
    -->
<input type="text" bindinput="handleinput" />
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view>
    {{num}}
</view>

 money.js

Page({
    data:{
        num:0
    },
     // 输入框input事件执行
    handleinput(e){
        // console.log("开心");
        this.setData({
            num:e.detail.value
        })
    },
    //加减按钮事件
    handletap(e){
        const operation=e.currentTarget.dataset.operation
        this.setData({
            num:this.data.num+=operation
        })
    }
})

 加一

减一

 

•  data-自定义属性
• const 声明一个只读常量，与js的var类似
• e.currentTarget注册了事件的监听对象
• const operation=e.currentTarget.dataset.operation 这是获取data-operation这个属性的{{1}}{{-1}}这些值的方法