开发中会遇到获取文本框text以及输入框input的数据,这里就来记录一下最基本的使用方法:

首先在.wxml里写好text和input两个组件

  <view class="inputname">
    <text class="textnormal">{{completed}}</text>
    <input class="textnormal" bindinput="name" value="{{name_value}}" placeholder="请输入名字"></input>
  </view>

text中的{{completed}}这个数据是要在.js文件的data里初始化赋值然后获取;

input中的bindinput是键盘输入时触发的事件,在此事件里获取输入的数据;value是输入框的初始内容,也在.js文件的data里初始化赋值;placeholder是输入框为空时占位符,相当于提示内容。

然后在.js文件里赋值获取

  /**
   * 页面的初始数据
   */
  data: {
    completed:"已完成",
    name_value:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("completed="+this.data.completed);
  },

  /**
   * 键盘输入时触发的事件  在这里实时获取输入的内容
   */
  name: function(res){
    console.log("输入的值为:"+res.detail.value);//打印输入的值
    this.setData({
      name_value: res.detail.value//赋值给name_value
    })
  },

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐