微信小程序之输入框文本的获取与展示

微信小程序 专栏收录该内容
10 篇文章 0 订阅

上一篇说到了小程序的带参跳转问题,没有看过,现在去看看

此篇还是通过比较单间的示例来展示输入文本的获取,在当前界面的展示。

一、在wxml页面中进行简单布局

<view>
  <label>用户名:</label>
  <input class="input" name="user" placeholder="输入姓名" bindinput="username" />
</view>>
<view>
  <label>密码:</label>
  <input class="input" name="psw" placeholder="请输入密码!" password="true" bindinput="password" />
</view>
<view style="margin-top:30px;">
  <button style="width:30%;"  bindtap="subbutton">登录</button>
</view>

<view>用户名:{{userName}}</view>
<view>密码:{{psw}}</view>

 说明:
1、password,true是隐藏密码,false是不隐藏密码。
2、margin-top,对象上面空出多少,30px。
3、最后,”“调用的是函数,{{}}引用的是值。

二、在JS页面中获取文本

1、定义:全局使用

  /**
   * 页面的初始数据
   */
  data: {
    username: '',
    userpws: ""
  },

2、获取第一个文本用户名,username接收

  username: function (e) {
    this.setData({
      username: e.detail.value
    })
  },

3、获取第二个文本密码,userpws接收

 password: function (e) {
    this.setData({
      userpws: e.detail.value
    })
  },

4、绑定登录按钮点击事件,获取两个文本展示更新到当前页面

subbutton: function (e) {
    console.log("姓名" + this.data.username + "密码:" + this.data.userpws)
    this.setData({
      userName: this.data.username,
      psw: this.data.userpws
    })
  }

js文件说明:
1、代码都要写在page({})中。
2、data:{}给个初始化的值。
3、this.Data({})这也是个固定的,定义函数更新data的数据。
4、数据结构是json格式的。
subbutton: function (e){}:触发事件。

input的更多属性

button的更很多属性
 

                                                            -END 

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值