<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>
<input type="text" (keyup)="keyUpFn($event)"/>
</div>
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angulardemo';
status='2';
isShow=false;
msg='消息'
getData(){ /*自定义方法获取数据*/ //获取
alert(this.msg);
}
setData(){
//设置值
this.msg='这是设置的值';
}
keyUpFn(e){
console.log(e)
}
}

效果:

angular点击事件和表单事件的更多相关文章

  1. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

  2. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. jQuery-3.事件篇---表单事件

    jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...

  4. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  5. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  6. Day050--jQuery表单事件 轮播图 插件库 ajax

    表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...

  7. (96)Wangdao.com_第二十九天_表单事件

    表单事件 input 事件        select 事件        change 事件        invalid 事件        reset 事件         submit 事件 ...

  8. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  9. 2018-06-25 js表单事件、三个高度和Ajax异步通讯技术

    表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> ...

随机推荐

  1. [dev][ipsec][distributed] strongswan如何做热迁移/高可用/High Availability

    问题描述: 原生的基于kernel 的 strongswan 如何做高可用,HA,High Availability 问题分析: 基于我们已知的,ipsec,strongswan的知识.问题分解如下: ...

  2. Linux命令——ps、pstree

    转载请注明出处:https://www.cnblogs.com/kelamoyujuzhen/p/9814883.html ps 简介 ps(processes status)是Unix / Linu ...

  3. jmeter+jenkins 配置过程(很详细)

    一.安装jmeter 第一步  安装JDK,配置JDK路径.注:jdk下载地址,推荐使用jdk1.8版本 http://www.oracle.com/technetwork/java/javase/d ...

  4. PAT基础级-钻石段位样卷2-7-1 心理阴影面积 (5 分)

    这是一幅心理阴影面积图.我们都以为自己可以匀速前进(图中蓝色直线),而拖延症晚期的我们往往执行的是最后时刻的疯狂赶工(图中的红色折线).由红.蓝线围出的面积,就是我们在做作业时的心理阴影面积. 现给出 ...

  5. Geohash 基本知识及 .NET 下计算相邻8个区域编码

    目录 一.简介 二.计算方法 三.GeoHash的精度 四.查找相邻8个区域的Geohash编码(.NET) 五.MySQL 中使用 GeoHash 最近项目中需要搜索周边的 POI 信息,查找的过程 ...

  6. PL/SQL 子查询

    一.概述 在一个SQL语句中嵌套另一个SQL语句成为子查询.包括单行子查询,多行子查询,多列子查询. 注意,当在DDL语句中引用子查询时,可以带有Order By子句:但是当在where子句.Set子 ...

  7. MongoDB 3.4 功能改进一览

    MongoDB 3.4 已经发布,本文主要介绍 3.4 版本在功能特性上做的改进,内容翻译自 [https://docs.mongodb.com/manual/release-notes/3.4/?_ ...

  8. [luogu] zpl的数学题1

    https://www.luogu.org/problemnew/show/U16887 $f[1] + f[2] + f[3] + .... + f[n] = f[n + 2] - 1$ 矩阵快速幂 ...

  9. Django系列(一):前期准备

    1.web应用 Web应用程序是一种可以通过web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件.应用程序有两种模式C/S.B/S.C/S是客户端 ...

  10. Selenium+Python附件上传

    在自动化测试过程中,我们会经常遇到附件上传,而附件上传主要分为两种:input型.非input型,我们本章就两种不同类型的上传方式讲解: (1)input型 <input id="tx ...