WeChat applet 微信小程序(5)双向绑定实例

小程序实现双向绑定实例

1. 创建基础页面
2. 给页面上的组件添加样式
3. 实现数据双向绑定

• 创建一个数组todoList，用于保存表单输出的数据

• 创建一个新变量todoItem，用于保存表单输出的每个内容

• 给表单添加事件进行双向绑定，将用户输出的内容放在todoItem中保存

• 给按钮添加事件进行双向绑定，用户输出内容时，todoItem值直接放在todoList中保存
  用户输出内容时，需要判断，输出内容是否为空，若为空，则不添加内容，用到短消息提示框
  

• 给删除信息的图片添加事件进行双向绑定，并添加模态对话框
  

实例代码：
todo.wxml

<view class="container">
  <view class="title">
    <h1>待办事项列表</h1>
  </view>
  <view class="header">
    <input type="text" 
           placeholder="请输入待办事项"
           bindinput="input"
           value="{
   {todoItem}}"/>
    <button type="primary" bindtap="tap">确定</button>
  </view>
  <view class="tips" wx:if="{
   {todolist.length == 0}}">暂无代办事项</view>
  <view class="todolist" wx:else>
    <view class