如何实现,在一个文本框中输入内容的同时在文本框下同时显示框中的内容,并且在输入内容大于10时上传至云数据库中,wxml语言

如何实现,在一个文本框中输入内容的同时在文本框下同时显示框中的内容,并且在输入内容大于10时上传至云数据库中,wxml语言

给元素绑定属性bindinput,像这样


<input  value="{{变量名}}" type="number"  placeholder="0"  bindinput="函数名"/>

然后在wxjs中命名函数中通过变量再赋值到界面,然后在函数里加入请求存入数据到云数据库的接口,把自己的参数post上就可以了。

代码实例 http://t.csdn.cn/gO0Zt

app.js,【env: 'as-7g1dqbrma69ca4c1',】这个要换成你自己的资源

// app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
        env: 'as-7g1dqbrma69ca4c1',
        traceUser: true,
      });
    }

    this.globalData = {};
  }
});
// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    desc: null,
  },
  onDescInput(e) {
    const desc = e.detail.value
    this.setData({
      desc
    })
    if (desc > 10) {
      wx.cloud.database().collection('todo').add({
        data: {
          desc
        }
      }).then(console.log).catch(console.log)
    }
  },
})
<!--pages/test/test.wxml-->
<view>
  <input  class="input" bindinput="onDescInput" value="{{desc}}" type="number" placeholder="请输入数字" />
  <view class="view" wx:if="{{desc!=null}}">{{desc}}</view>
</view>
/* pages/test/test.wxss */
.input{
  border: green 1px solid;
}
.view{
  background-color: grey;
  color: red;
  margin-top: 1rem;
}