微信小程序_04 数据绑定

本节内容

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

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

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 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

14120
来自专栏coding

引用第三方样式库实现动画

animate.css是一个能渲染出炫酷效果的css库,只需引用该css库,在相应的元素上加上class类名,即可实现。

8010
来自专栏Nian糕的私人厨房

jQuery 动态绑定

这是在项目过程中所遇到的一个问题,给 JS 动态生成的元素绑定事件失效,代码如下所示:

28630
来自专栏React Native开发圈

React Native 截屏组件

截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕显示的页面内容。如果是ScrollView,那么未显示的部分是不会被截取的。

17320
来自专栏技术墨客

React中的模式对话框 转

在16.x版本之后React提供了Protals功能来解决模式对话框不在Dom根节点导致的一些BUG。除了Protal还有更多的方法去解决这些问题,本文来自Da...

9130
来自专栏每日一篇技术文章

weex-10-组件a的使用

a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现?我们后面会讲到!

13220
来自专栏无原型不设计

【Mockplus教程】页面属性

每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠...

34260
来自专栏Youngxj

杨小杰工具箱图标版网页源码带后台

21720
来自专栏河湾欢儿的专栏

探究 css touch-action 属性

今天在写vue项目的时候碰到一个 Unable to preventDefault inside passive event listener due to ...

15910
来自专栏上善若水

010HTML页面加载和解析流程详细介绍

23750

扫码关注云+社区

领取腾讯云代金券