wx小程序-input事件改变数据

一、input标签

在index.xwml文件夹下写出input标签，并给它绑定一个处理函数inputTTT，用来改变msg的数据值。

<input value="{{msg}}" bindinput="inputTTT"/>

二、样式

和web一样，为了让input文本输入框好看一点，我们可以给它加样式，使用标签选择器，在index.wxss文件夹下。

input{
  border: 1px solid #eee;
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

三、确定数据与实现处理函数

首先我们需要在index.js文件夹下中的data里面添加一个msg数据，初值我就给了一个“你好，”，然后通过setData函数来将用户在输入框输入的值，重新赋给msg以达到修改数据的目的。

Page({
  // 页面初始数据
  data: {
    msg:'你好,'
    },
    inputTTT(e){
      this.setData({
        msg:e.detail.value
      })
    }
})