1.输入数值并在页面上显示
input标签是输入标签,可以获取用户在页面上的输入,绑定一个input事件获取数据e,而input事件的名称是可以自己在JS文件的Page字段命名的。格式bindinput="函数名"
1)需要给input标签绑定input事件,绑定关键字bindinput
2)获取输入框的值,通过事件源对象来获取,通过控制台console.log(e)的打印发现,值被存放在e.detail.value中
3)把输入框中的值赋值到data中,但是不能像之前使用CPP那样直接赋值
正确写法:
this.setData(
{
num:e.detail.value
}
)
页面的HTML文件
<input type="text" bindinput="handleInput"/>
<view> </view>
<view>
{{nums}}
</view>
页面的JS文件
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
nums: 0
},
//输入框的input事件的执行逻辑
handleInput(e) {
console.log(e.detail.value);//打印
this.setData(
{
nums: e.detail.value
}
)
}
})
2.使用按钮控制页面屏幕上的数字加一减一
<button>标签是按钮标签,使用bindtab属性可以绑定一个点击事件函数。格式:bindtab="事件函数名称"
1)为button标签绑定事件使用bindtab属性
2)无法在小程序当中的事件中直接传参-如果直接传参的话会被识别为函数的命名的
3)通过自定义属性的方式来传递参数 使用button标签的data-operation属性来为事件传参
4)事件源中获取自定义属性 同样可以打印出来,看看data-operation属性的值在哪里
页面的HTML文件
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<view> </view>
<view>
{{nums}}
</view>
页面的JS文件
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
nums: 0
},
//加减按钮的事件
handletap(e){
//console.log(e);
//获取自定义属性 operation
const operation = e.currentTarget.dataset.operation;
this.setData({ nums: this.data.nums + operation })
}
})
点击 ‘-’ 的按钮