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就可以调用数据。

input和btton的相互使用————小程序的更多相关文章

  1. 微信小程序监听input输入并取值

    小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...

  2. 小程序中点击input控件键盘弹出时placeholder文字上移

    最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...

  3. 小程序input输入框获取焦点时,文字会出现闪动

    最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...

  4. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  5. 小程序 textarea、input 层级过高,导致填写内容穿透,z-index无效问题解决方案。

    小程序的textare.input输入框层级是最高的 那么我们在textare.input输入的内容就会总是显示在最上一层. 这是时为什么呢?官方文档有说明,因为textare.input这些是原生组 ...

  6. 小程序 公众号/h5相互跳转-webview

    小程序与h5的跳转 前提小程序管理后台配置域名白名单,并且h5页面是嵌在小程序里面(相互跳的前提条件) 在业务域名中设置好访问的h5地址 微信官方web-view 介绍地址 https://devel ...

  7. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  8. 小程序批量获取input的输入值,监听输入框,数据同步

    在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...

  9. 小程序中input设置宽度后宽度还有空间,但是placeholder被遮挡问题

    最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <inp ...

随机推荐

  1. web 前端开发学习路线

    初级 HTML 5 HTML 5 与 HTML 4 的区别 HTML 5 新增的主体结构元素 HTML 5 新增的非主体结构元素 HTML 5 表单新增元素与属性 HTML 5 表单新增元素与属性(续 ...

  2. c排序

    #pragma once//如果写头文件 放置头文件重复包含 #include<stdio.h> //定义类型 结构体类型定义 //宏定义 #define //函数申明 void prin ...

  3. (springboot)自定义Starter

    要引入的jar项目,即自定义的Starter项目: pom:(这里不能引入springboot整合否则测试项目注入失败) <?xml version="1.0" encodi ...

  4. ts 学习笔记 - 泛型

    目录 泛型 举个栗子 泛型约束 多个参数时也可以在泛型约束中使用类型参数 泛型接口 泛型类 泛型参数的默认类型 泛型 泛型(Generics)是指在定义函数.接口或者类的时候, 不预先指定其类型,而是 ...

  5. Scala 系列(二)—— 基本数据类型和运算符

    一.数据类型 1.1 类型支持 Scala 拥有下表所示的数据类型,其中 Byte.Short.Int.Long 和 Char 类型统称为整数类型,整数类型加上 Float 和 Double 统称为数 ...

  6. Markdown表格宽度调整

    Markdown 表格默认宽度是根据内容来的,如果某一列内容很长的话会将其他列的宽度占用导致显示样式很丑.我们可以在表格前增加 CSS 样式来限制列的宽度: <style> table t ...

  7. hdfs运行机制

    hdfs:分布式文件系统 hdfs有着文件系统共同的特征: 1.有目录结构,顶层目录是:  / 2.系统中存放的就是文件 3.系统可以提供对文件的:创建.删除.修改.查看.移动等功能 hdfs跟普通的 ...

  8. Web前端安全分析

    随着互联网高速的发展,信息安全已经成为企业重点关注焦点之一,而前端又是引发安全问题的高危据点,所以,作为一个前端开发人员,需要了解前端的安全问题,以及如何去预防.修复安全漏洞. 一.XSSS攻击 1. ...

  9. Linux下手动安装JDK

    一.删除自带的JDK 查询系统自带JDK rpm -qa | grep java rpm -qa | grep jdk 删除查询出来的文件名 rpm -e --nodeps 文件名 命令执行成功后重新 ...

  10. mybatis 源码分析(八)ResultSetHandler 详解

    本篇博客就是 myabtis 系列的最后一篇了,还剩 ResultSetHandler 没有分析:作为整个 mybatis 最复杂最繁琐的部分,我不打算按步骤一次详解,因为里面的主要内容就是围绕 re ...