[TOC] ## vue、react對比 [vue-TodoList](http://www.hmoore.net/book/henputongderen/vuexuexi/edit) [React](http://www.hmoore.net/book/henputongderen/react/edit) ## 功能介紹 > 將input輸入框里的內容打印到頁面上，可以輸入多條，并可以點擊刪除 > 知識點組件傳值  ## 主頁wxml ``` <view class="container"> <view class="input"> <input type="text" value="{{value}}" bindinput="onInput" /> //bindinput 鍵盤輸入時觸發事件 <button plain="{{true}}" bindtap='handleClick' > 確定</button> </view> <block wx:for="{{list}}" wx:key="index"> <v-list list="{{item}}" listId="{{index}}" bind:id="handleDelete"></v-list> </block> </view> ``` ## 主頁js ``` const app = getApp() Page({ data: { value: "hello", list: [] }, //獲取input輸入框的值 onInput(e){ var value = e.detail.value; this.setData({ value }) }, //點擊確定添加 handleClick(e) { var value = this.data.value; var list=this.data.list if(!list.includes(value)){ console.log(value) list.unshift(value) this.setData({ list:list }) } }, //刪除 handleDelete(e){ var id = e.detail.id; console.log(id) var list = this.data.list; list.splice(id,1) this.setData({ list:list }) } }) ``` ## 主鍵wxss ``` <view class="list" bind:tap="handleDelete">{{list}}</view> ``` ## 主鍵js ``` properties: { list:Object, listId:Number }, methods: { handleDelete(){ var id = this.properties.listId; this.triggerEvent('id',{ id }) } } ```