1、参数传递法

例子:获取input框内容

这里有个独特的地方,直接在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文件中

 

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

2、双向绑定法

这种方法比较通用,但是需要在ts中定义对应的变量

例子1:获取input框内容

在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);
  }

例子2:获取单选按钮的值

在html页面中
 

 <ion-toggle [(ngModel)]="rememberName"></ion-toggle>

在ts文件中
  

rememberName: any;
  login() {
    console.log(this.rememberName);
  }

ionic 获取input的值的更多相关文章

  1. js技术之根据name获取input的值

    一.前端的代码 <p>Name: <input type='text', name = 'name'/></p> <p>Age: <input t ...

  2. js技术之如何在JS中获取input的值

    在JavaScript中获取input元素value的值: 方法一:var variations_number = $("#input的id名").val(); 1 <!DO ...

  3. 获取input的值

    一.jQuery获取单选框的值1.$('input:radio:checked').val():2.$("input[type='radio']:checked").val();3 ...

  4. jquery 获取input的值

    $("input").attr("value")   --  获取的是input的默认值 $("input").val()         ...

  5. 后台拼接input 后,动态获取input的值

    //前台 <input id=" /> //后台 string text = request.form["text"].toString();

  6. asp.net 后台获取input的值

    前台:<input id="test" value="" runat="server" /> 只要架上runat="s ...

  7. C# 代码页获取input的值

    <input id="aa" name="iaa" type="text" /> Label1.Text = Request.F ...

  8. react 获取 input 的值

    1.通过 onChange -- e.target.value class App extends Component { state = { username: '张三' }; // 用户名 get ...

  9. react 获取input的值 ref 和 this.setState({})

    1.ref //class my_filter(reg){          const inpVal = this.input.value;          console.log(inpVal) ...

随机推荐

  1. Code First 二 DataAnnotation 数据注解

    Code-First中配置域类 我们在前一节学习了默认的代码优先约定.Code-First使用默认约定从您的域类构建概念模型.Code-First利用称为约定而不是配置的编程模式.这意味着您可以通过配 ...

  2. Linq不分组求多列的和

    我们需要写Linq查询语句,使用let来创建一个新的变量 Let 关键字 “let”关键字在查询语法中很有用.它会投影一个新的范围变量,允许重新使用表达式并使查询更具可读性. 例如: 这里需要写,两遍 ...

  3. Many-to-many relationships in EF Core 2.0 – Part 4: A more general abstraction

    In the last few posts we saw how to hide use of the join entity from two entities with a many-to-man ...

  4. Git&GitHub-初步使用

    Git 1.安装 下载安装包,安装,默认安装了 Git GUI Here 和 Git Bash Here. 需要在哪里使用 git,只需在文件夹空白处右键,选择Git Bash Here即可打开 gi ...

  5. MySQL学习之流程结构

    流程结构 流程结构:代码的执行顺序. if分支 根据要求选择合适的执行部分. 基本语法 if在MySQL中有两种基本用法 1.用在select查询当中,当作一种条件来进行判断. 基本语法:if(条件, ...

  6. PHP中级程序员常见面试题

    1).写一个函数,从一个标准url里取出文件的扩展名,需要取出php或.php <?php $a="http://www.test.com.cn:88/abc/de/fg.php?id ...

  7. 基于JQ的简版选项卡记录

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Tornado异步与延迟任务

    最近一直在研究Tornado异步操作,然而一番研究后发现要使一个函数异步化的最好方法就是采用相关异步库,但目前很多功能强大的库都不在此列.经过一番查找文档和搜索示范,终于发现了ThreadPoolEx ...

  9. Python入门 —— 2048实战(字符界面和图形界面)

    2048 game (共4种实现方法) 目录: .. 图形界面 ... pygame 和 numpy .. 字符界面 ... 第一种 ... curses ... wxpython ... 第二种 . ...

  10. sass的嵌套

    sass的嵌套包括两种: 1.选择器的嵌套.(最常用到) 指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性. 在选择器嵌套中,可以使用&表示父元素选择器 ...