In wxml:
<!--pages/everything/everything.wxml-->
<input type="text" placeholder="Please enter plan"
value="{ {temp}}"
bindinput="inputHd"
bindconfirm="addTodo"
/>
<view>
<view class="item" wx:for="{ {list}}">
<switch type="checkbox" checked="{ {item.done}}" bindchange="switch2Change"/>
<text>{ {item.title}}</text>
<text bindtap="delTodo" data-item="{ {item}}">X</text>
</view>
</view>
js in:
// pages/everything/everything.js
Page({
/**
* Initial data of the page
*/
data: {
temp:"",
list:[
{title:"Learning vue",done:true},
{title:"Learning Mini Program",done:false}
]
},
delTodo(e){
var item=e.target.dataset.item;
var list=this.data.list;
//Find subscript
var ind=list.findIndex(value=>value.title==item.title);
list.splice(ind,1);
this.setData({list})
wx.setStorageSync('list', this.data.list)
},
addTodo(){
var list=this.data.list
list.push({
title: this.data.temp,
done:false
});
this.setData({list,temp:""})
wx.setStorageSync('list',this.data.list)
},
inputHd(e){
// Two-way binding
this.setData({temp:e.detail.value})
},
/**
* Life cycle function--listen to page loading
*/
onLoad(options) {
var list=wx.getStorageSync('list')||[];
this.setData({list})
},
/**
* Life cycle function--listen to the completion of the initial rendering of the page
*/
onReady() {
},
/**
* Life cycle function--monitoring page display
*/
onShow() {
},
/**
* Life cycle function--listen to page hiding
*/
onHide() {
},
/**
* Life cycle function--listen for page unloading
*/
onUnload() {
},
/**
* Page-related event processing function--monitor the user's pull-down action
*/
onPullDownRefresh() {
},
/**
* Handling function for page pull-down event
*/
onReachBottom() {
},
/**
* User clicks on the upper right corner to share
*/
onShareAppMessage() {
}
})
