[TOC] ## vue、react对比 [vue-TodoList](https://www.kancloud.cn/book/henputongderen/vuexuexi/edit) [React](https://www.kancloud.cn/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 }) } } ```