• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序_04 数据绑定

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本节内容

理解微信小程序的数据交互

在上一篇文章(控件与布局)主要介绍的页面的控件的展示和布局,如下图

83F07AE4-6917-4630-B53F-56D9C7CE4C8D.png

本篇就来演示一下数据是怎么交互的

我们的需求是在输入框输入内容后,点击提交按钮,在上面的标签上进行显示

  • 第一步 在xxx.wxml 绑定两个事件 一个是监听输入框的值,一个是提交按钮的点击事件,代码如下
  <view class = "container">
    <view  class = "text-section">
        <text > {{name}}</text>
    </view>
    <view class ="input-section" >
          // 输入事件 bindinput  绑定到函数inputName 上
         <input placeholder="请输入您的姓名" bindinput="inputName"/>
    </view>
    <view class = "submit_section">
        //  bindtap 代表单击事件  绑定到方法tapSubmit 上
        <button class = "submit" bindtap="tapSubmit">提交</button>
    </view>
  </view>
  • 第二步 在js 文件中这两个方法
Page({
  data:{
    name:"这里会显示你输入的名字",
    input_text:'' // 存放用户输入的值
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  
  // 用户通过键盘输入值时,就会触发这个函数
  inputNamefunction(input){
    var that = this;
    console.log(input);
    // 缓存用户输入的值,注意这里一次只能修改一个值
    that.setData({
     input_text:input.detail.value
    });
  }
   // 当用户点击提交按钮 会 触发这个函数
   bindButtonTap:function(){
   var that = this;
   // 我们将输入框的值 直接赋值给name 因为name 和text 标签进行了绑定所以直接会显示出来 不需要刷新
   that.setData({
     name:that.data.input_text
   })
  },
  })
最终效果

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
抖音小程序基本内容发布时间:2022-07-18
下一篇:
小程序的生命周期发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap