簡單的todolist

Tip：獲取表單元素的value
getval:function(e){	
	e.detail.value==表單元素的value
}

sel:function(e){	
	e.target.dataset.index==輸出列表元素的下標
}

Bindinput:input發生改變觸發的事件
<input type="text" bindinput="getval" value="{{val}}"/>


事件傳引數  通過data-變數名＝    獲取引數通過   e.target

微信todolist
    <input class='ipt' placeholder='請輸入內容' bindinput='iptvalue' value="{{val}}"></input>
    <button bindtap='add'>新增</button>
    <view wx:for="{{list}}" wx:key>
        {{index}}--------{{item}}------
        <button size='mini' catchtap='del' data-index="{{index}}">刪除</button>
        <!--傳參 data-index="{{index}}" -->
    </view>
 

data: {
     tit:"哈哈哈哈",
     arr:["奧巴馬","奧巴驢","奧巴豬","奧巴羊","奧巴牛"],
     str:"我是模板變數",
     val:"",
     list:[]
  },

  
  
  iptvalue:function(e){
     console.log(e.detail.value)  //監聽input框裡的值
    this.setData({ val: e.detail.value})
  },
  add:function(){
    var list = this.data.list;
    list.push(this.data.val)
    console.log(list)
    this.setData({ list: list, val: ""})
    
  },
  del:function(e){         //刪除
    console.log(e.target.dataset.index) //獲取所點選的下標
    var list1 = this.data.list;
    var i = e.target.dataset.index;
     list1.splice(i,1)
    this.setData({list:list1})
  },
 

<view>
    微信todolist
    <input class='ipt' placeholder='請輸入內容' bindinput='iptvalue' value="{{val}}"></input>
    <button bindtap='add'>新增</button>
    <view wx:for="{{list}}" wx:key>
        {{index}}--------{{item}}------
        <button size='mini' catchtap='del' data-index="{{index}}">刪除</button>
        <!--傳參 data-index="{{index}}" -->
    </view>


    <button  bindtap='gotozhifubao'>點選事件</button>
    <view class="con1">{{tit}}</view>
    <view class='con2'></view>
    <view wx:for="{{arr}}" wx:key>{{index}}----{{item}}</view>
    <template is="moban" data="{{str}}"></template>
 <!-- 定義模板 -->
    <template name="moban">
      <view >我是模板---{{str}}</view>
      <button>我是模板裡的按鈕</button>
    
    </template>

    <!-- 事件 -->

    <!-- bindtap事件會促發冒泡事件 -->
    <!-- catchtap事件會阻止冒泡 -->
    <view catchtap='fu'>
       父元素
       <button catchtap='zi'>子元素</button>
    
    </view>
   
</view>
 

Page({

  /**
   * 頁面的初始資料
   */
  data: {
     tit:"哈哈哈哈",
     arr:["奧巴馬","奧巴驢","奧巴豬","奧巴羊","奧巴牛"],
     str:"我是模板變數",
     val:"",
     list:[]
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    wx.setNavigationBarTitle({
      title: '微信',
    })
  },
  gotozhifubao:function(){
    wx.navigateTo({
      url:"../logs/logs"
    })
  },
  fu:function(){
    console.log("父元素")
  },
  zi: function () {
    console.log("子元素")
    console.log(this.data.tit)
    this.setData({str:"呵呵呵"})
  },
  iptvalue:function(e){
     console.log(e.detail.value)  //監聽input框裡的值
    this.setData({ val: e.detail.value})
  },
  add:function(){
    var list = this.data.list;
    list.push(this.data.val)
    console.log(list)
    this.setData({ list: list, val: ""})
    
  },
  del:function(e){         //刪除
    console.log(e.target.dataset.index) //獲取所點選的下標
    var list1 = this.data.list;
    var i = e.target.dataset.index;
     list1.splice(i,1)
    this.setData({list:list1})
  },
  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
    
  }
})