微信小程序todolist添加和删除功能

1、微信小程序 TODOLIST 添加和删除功能

1添加

    <view class="input">
      <input bindinput="oninput" value="{{intupbase}}" ></input>
    </view>
    <view class="button">
      <button type="primary" bindtap='onclick'>添加</button>
    </view>

wxml页面代码，绑定bindinput="oninput"事件获取value="{{intupbase}}的值，然后给button按钮绑定点击事件bindtap='onclick'。

data: {
    list:[],
    intupbase:'',
    test:''
  },
  * 获取输入框的值
   */
  oninput:function(e){
    const baseValue= e.detail.value;
   //通过this.setData()将数据渲染到视图层
     this.setData({
      test:baseValue
     });
   },
   /**
    * 点击添加
    */
   onclick:function(){
    this.data.list.push(this.data.test);
    // console.log(this.data.list)
    this.setData({
      list:this.data.list,
      intupbase:''
    })
   },

1删除

  <view wx:for='{{list}}' wx:key='index' class="content">
  <view> {{item}}</view>
  <view><button class="btn" bindtap="onClick" data-index="{{index}}">删除</button></view>
  
  </view>

wxml页面，渲染来自添加的内容，给button按钮绑定点击事件获取当前点击的下标，然后穿到js页面。

   onClick:function(e){
    let {index}=e.currentTarget.dataset
    // console.log('dele',index)
   this.data.list.splice(index,1)
   this.setData({
     list:this.data.list
   })
   },

利用传过来的下标进行解构赋值，然后删除当前点击的内容。