zoukankan      html  css  js  c++  java
  • input和btton的相互使用————小程序

    input和btton的相互使用————小程序

    index.js

      data: {
       userxx:'1111',
    
      },
      changeSum(){
        // this.data.userxx="changeSuccess",这种方法定义不辽的,不要用这个
        this.setData({
          userxx:"2222"
        })
      },
    

    index.wxml

    <button class="btn" bindtap="changeSum">简单的修改数据</button>
    <view >{{userxx}}</view>
    

    这是简单的button改数据。↑

    下面说一下,input输入的数据来改视图,通过button点击

    先说个简单的,input的数据直接获取!

    getPhone: function (e) {
        var val = e.detail.value;
        this.setData({
          telphone: val
        });
      },
    

    index.wxml

    <input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
    <view >{{telphone}}</view>
    

    input的数据实时的显示出来!!

    下面通过点击button获取 input的数据,到某个view中(不点不会显示)!

    index.js

    getPhone: function (e) {
        var val = e.detail.value;
        this.setData({
          telphone: val
        });
      },
      getInput: function () {
        var inp = this.data.telphone;
        this.setData({
          inputSum: inp
        });
      },
    

    index.wxml

    <input type="number" placeholder="请输入手机号" class="inp-holder" maxlength="11" bindinput="getPhone" />
    <button class="btn" bindtap="getInput">input数据来修改数据</button>
    <view >{{inputSum}}</view>
    

    步骤:

    1. 把input的数据拿出来。放到telphone
    2. 点击后,inputSum去拿telphone的数据。
    3. 这只是获取到view,其实可以获取到api就可以调用数据。
  • 相关阅读:
    Electron踩坑记录
    TypeScript实现设计模式——生成器模式
    在express中使用ES7装饰器构建路由
    微信小程序下载文件(非图片),并校验扩展名。
    防抖与节流
    yarn
    spark
    docker php-fpm中安装GD库
    thinkphp6 多应用路由遇坑记
    CentOS 7 开启SSH远程登录
  • 原文地址:https://www.cnblogs.com/cth0/p/11568729.html
Copyright © 2011-2022 走看看