wxml文件
页面结构,输入框绑定bindinput事件(发生改变触发的事件),绑定事件中e.detail.value获取每次改变的输入框值。
删除按钮,data-变量名= ,删除按钮点击事件通过e.target.dataset 获取绑定变量值。
<text>{{tit}}</text>
<input type="text" placeholder="请输入" value="{{input}}" bindinput="inputvalue"/>
<button bindtap="add">添加</button>
<block wx:for="{{arr}}" wx:key="{{index}}">
<view>
{{index}}===={{item}}
<button data-index="{{index}}" bindtap="del">删除</button>
</view>
</block>
js文件
Page({
/**
* 页面的初始数据
*/
data: {
tit:'hello todolist',
input:'',
arr:[
'haha','heihei'
]
},
inputvalue(e){
this.setData({
input: e.detail.value
});
},
add(){
let arr = this.data.arr;
arr.push(this.data.input);
this.setData({
arr: arr,
input: ''
});
},
del(e){
let index = e.target.dataset.index;
let arr = this.data.arr;
arr.splice(index,1);
this.setData({
arr:arr
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: 'todolist',
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})