一.功能
二、步骤
1.添加输入框
<!-- 1.输入框 -->
<input type="text" bindinput="handleInput" value="{{text}}" />
/* 1.输入框样式 */
input {
border: 1rpx solid blue;
height: 50px;
line-height: 50px;
border-radius: 10px;
}
2.添加按钮
<!-- 2.搜索按钮 -->
<button size="mini" bind:tap="handleAdd">add</button>
/* #将输入框和按钮放置到一行样式 */
.box{
display: flex;
flex-direction: row;
}
3.将内容按序排列输出
<!-- 3.内容排序输出 -->
<view wx:if="{{datalist.length>0 }}">
<view wx:for="{{datalist}}" wx:key="index" class="list">
<text>{{item}}</text>
</view >
// 3.提取出输入内容
handleInput(evt){
console.log("input",evt.detail.value)
this.setData({
text:evt.detail.value
})
},
handleAdd(){
console.log(this.data.text)
this.setData({
datalist:[...this.data.datalist,this.data.text],
text:""
})
},
/* 3.list排列 */
.list{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.list text{
width: 200px;
}
4.增加删减功能
<!-- 4.增加删减功能 -->
<button size="mini" bind:tap="handleDelete" data-myid="{{index}}">delete</button>
<view wx:else="">暂无代办事件</view>
// 4.内容删除
handleDelete(evt){
console.log("delte",evt.target.dataset.myid)