1.参数传递法

直接在input处使用 #定义参数的name值,注意在ts中参数的类型

html页面:

<ion-input type="text" placeholder="请输入账号" #username></ion-input>
<ion-input type="password" placeholder="请输入密码" #password></ion-input>
<button (click)="login(username, password)">登录</button>

ts文件中(HTMLInputElement类型)

login(username: HTMLInputElement, password: HTMLInputElement) {
    console.log(username.value)
    console.log(password.value)
  }

2.双向数据绑定

html页面:

<ion-input type="text" placeholder="请输入账号" [(ngModel)]="username"></ion-input>
<ion-input type="password" placeholder="请输入密码" [(ngModel)]="password"></ion-input>
<button (click)="login()">登录</button>

ts文件中:

username: string;
password: string;
login() {
 console.log(this.username);
 console.log(this.password);
}

ionic获取表单input的值的两种方法的更多相关文章

  1. PHP获取MySql新增记录ID值的3种方法

    From: http://www.jb51.net/article/51473.htm 这篇文章主要介绍了PHP获取MySql新增记录ID值的3种方法,一般使用PHP自带函数mysql_insert_ ...

  2. 选中没有选中的复选框,匹配含有某个字符串的正则,json取值的两种方法,把变量定义在外面跟里面的区别

    一.筛选没有选中的复选框:not("input:checked") 二.匹配有VARCHAR的字符串:".*VARCHAR.*?" 三.json取值的两种方法 ...

  3. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  4. JMeter接口测试-提取动态列表最后一个值的两种方法

    前言 在用JMeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.今天我们来学习两种提取动态列表最后一个值的两 ...

  5. javascript获取表单的各项值

    何谓表单? 表单是html页面中负责数据采集功能的部件,它往往由三个部分组成: 表单标签:<form></form> 用于声明表单的范围,位于表单标签中的元素将被提交.属性有m ...

  6. Java代码中获取配置文件(config.properties)中内容的两种方法

    方法千千万,本人暂时只总结了两种方法. (1)config.properties中的内容如图 在applicationContext.xml中配置 <!-- 引入配置文件 --> < ...

  7. js jquery, jquery-ui 获取form各种表单input的值?

    如何获取? make up (for): 弥补, 补偿, her beaty cannot make up for her stu'pidity. five Basic laws of human s ...

  8. 表单input中录入资料的检查方法及示例

    本文内容 表单录入信息的检查原则 常见检查的三种方法 示例     输入框有字符长度的限制     输入框有输入字符个数范围的限制 知识补给--检查方式的介绍     输入框只可(或不可)输入数 ...

  9. Selenium获取input值的两种方法:WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

随机推荐

  1. Java 三种方式实现接口校验

    方法一:AOP 代码如下定义一个权限注解 package com.thinkgem.jeesite.common.annotation; import java.lang.annotation.Ele ...

  2. Android程序员必知必会的网络通信传输层协议——UDP和TCP

    1.点评 互联网发展至今已经高度发达,而对于互联网应用(尤其即时通讯技术这一块)的开发者来说,网络编程是基础中的基础,只有更好地理解相关基础知识,对于应用层的开发才能做到游刃有余. 对于Android ...

  3. [Swift]LeetCode636. 函数的独占时间 | Exclusive Time of Functions

    Given the running logs of n functions that are executed in a nonpreemptive single threaded CPU, find ...

  4. [Swift]LeetCode677. 键值映射 | Map Sum Pairs

    Implement a MapSum class with insert, and sum methods. For the method insert, you'll be given a pair ...

  5. [Swift]LeetCode812. 最大三角形面积 | Largest Triangle Area

    You have a list of points in the plane. Return the area of the largest triangle that can be formed b ...

  6. [Swift]LeetCode873. 最长的斐波那契子序列的长度 | Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...

  7. IOS开发之尺寸

    在移动端或者前端开发中,UI图通常是带标注的,指定某个控件的长宽等属性,一般UI给的是68px,72px这样的样式,但是我们在开发过程中通常又并不是完全按照上面的标注去设置值,有时候需要将这个标注除以 ...

  8. 我曾做过陈士成,也做过孔乙己,还做过阿Q

    一. 我现在是陈士成,陈士成现在是我.为什么这么说呢? 那年那天,天刚微微亮,似乎还在打着哈欠.我和父亲去得很早,为的就是在“小升初的考试成绩榜单”前面占一个有利的位置.我不记得当时穿的厚还是不厚,体 ...

  9. 网络协议 8 - TCP协议(上):性恶就要套路深

    系列文章: 网络协议 1 - 概述 网络协议 2 - IP 是怎么来,又是怎么没的? 网络协议 3 - 从物理层到 MAC 层 网络协议 4 - 交换机与 VLAN:办公室太复杂,我要回学校 网络协议 ...

  10. 一个.NET Core开发者的Linux入门学习笔记

    用.NET Core开发也有一段时间了,但是由于工作原因一直都是在Windows系统上进行的开发,一直想学习Linux然后把.NET Core开发的程序跑在Linux上,然后把心得体会记录一下发布再博 ...