小程序实现双向绑定实例
- 创建基础页面
- 给页面上的组件添加样式
- 实现数据双向绑定
-
创建一个数组
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