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. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  2. [Swift]LeetCode405. 数字转换为十六进制数 | Convert a Number to Hexadecimal

    Given an integer, write an algorithm to convert it to hexadecimal. For negative integer, two’s compl ...

  3. [Swift]LeetCode736. Lisp 语法解析 | Parse Lisp Expression

    You are given a string expressionrepresenting a Lisp-like expression to return the integer value of. ...

  4. ubuntu配置https

    # 重定向 http 到 https server { listen 80; server_name www.domain.com; rewrite ^(.*)$ https://$server_na ...

  5. 浅谈React

    浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...

  6. Python内置函数(46)——oct

    英文文档: oct(x) Convert an integer number to an octal string. The result is a valid Python expression. ...

  7. 『Raid 平面最近点对』

    平面最近点对 平面最近点对算是一个经典的问题了,虽然谈不上是什么专门的算法,但是拿出问题模型好好分析一个是有必要的. 给定\(n\)个二元组\((x,y)\),代表同一平面内的\(n\)个点的坐标,求 ...

  8. PL/SQL基础语法入门

    先前安装了PL/SQL软件 PL/SQL全称为Procedural Language/SQL. PL/SQL也是一种程序语言,叫做过程化SQL语言,是Oracle数据库对SQL语句的扩展 打PL/SQ ...

  9. 你的第一个Django程序

    本文使用Pycharm.Django 2.0.9.Python 3.6环境,本文大纲 建立Django项目 建立页面 什么是URLconf和ROOT_URLCONF Django怎么处理URL请求 关 ...

  10. Chapter 5 Blood Type——19

    "Are you feeling faint?" “你感觉头晕吗?” "Yes, sir," I muttered, internally kicking my ...