wx数据绑定

wxml

<!--pages/xiaoxi/xiaoxi.wxml-->
<view class="message" wx:for="{{usermessage}}" wx:key="index">已发表的评论：{{item.id}} {{item.text}}</view>
 <form bindsubmit="formSubmit" bindreset="formReset">

<view class="inputBottom" >
  <input  name="input" model:value="{{value}}" class="textInput" placeholder="请输入您的消息" />
  <button formType="submit" class="submit" >发送</button>
</view>

</form>
<view wx:for="{{pl_list}}" wx:key="index">您发送的信息为：{{usermessage}}</view> 

js

Page({
  
  formSubmit: function (e) {
    // console.log(this)
    // console.log('form发生了submit事件，携带数据为：', e.detail.value)
    const messageItem = {
      id:"",
      text:e.detail.value.input
    }
    let messageList = this.data.usermessage
    console.log(this.data.usermessage)
    messageList.push(messageItem)
    this.setData({
      usermessage:messageList,
      value:"",
      
    })

  },
  
  // formReset: function () {
  //   console.log('form发生了reset事件')
  //},
  /**
   * 页面的初始数据
   */
  data: {
    value:"",
    usermessage:[
      {
        id:"1",
        text:"123",
      },
      {
        id:"2",
        text:"456"
      }
    ]
    
  },
)}

wxss

/* pages/xiaoxi/xiaoxi.wxss */
.inputBottom{
width: 100%;
position: fixed;
left: 0rpx;
bottom: 0rpx;
background: #fff;
height: 100rpx;
box-sizing: border-box;
padding: 18rpx 10rpx;
}
 .inputBottom .textInput{ 
  display: inline-block; 
  width: 80%; 
  } 
  /* .inputBottom .textInputPlaceHolder{
  font-size: 30rpx;
  } */ 
  .inputBottom .submit{ 
  font-size: 34rpx; 
  display: inline-block;
  text-align: center; 
  margin-right: 2rpx;  
  background: green;  
  border-radius: 6rpx;  
  color: #fff;  
  padding: 2rpx 8rpx;
  width: 100rpx;
  }