<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. C++——多维数组动态开辟与释放

    前言 在讨论多维数组动态开辟与释放之前,先说说什么是二维数组静态开辟与释放. 形如这种就是静态开辟内存,事先画好了内存大小 #include<iostream> using namespa ...

  2. HMM 模型输入数据处理的优雅做法 来自实际项目

    实际项目我是这样做的: def mining_ue_procedures_behavior(seq, lengths, imsi_list): print("seq 3:", se ...

  3. linux网络编程之socket编程(十一)

    今天继续学习socket编程,这次主要是学习超时方法的封装,内容如下: ①.alarm[不常用,了解既可] 它的实现思路是这样的: 但是这种方案有一定的问题,因为闹钟可能会作为其它的用途,这时所设置的 ...

  4. JDBC_通过DriverManager获得数据库连接

    package day_18; import org.junit.Test; import java.io.InputStream; import java.sql.*; import java.sq ...

  5. idea中tomcat的On Upate Action 与 On Frame Deactivation配置

    On Upate Action 与 On Frame Deactivation  这两个选项的设置,依赖于项目的部署方式 是war包 还是 exploded , 只讲exploded模式下的设置,因为 ...

  6. Jenkins构建自动化--实例一

    1.新建任务 2.配置任务 3.构建任务 5.构建完成后,可以点击任务名称查看结果

  7. jquery头部高亮显示方法

    做网站都有头部导航栏,但导航栏的高亮显示一般都是后台技术人员做传参判断来显示高亮样式,今天来教大家一个用jquery来显示 废话不多说,直接上代码 第一步,在需要的页面中写入 <input ty ...

  8. python 操作excle 之第三方库 openpyxl学习

    目录 python 操作excle 之第三方库 openpyxl学习 安装 pip install openpyxl 英文文档链接 : 点击这里~ 1,定位excel 2,读取excle中的内容 3, ...

  9. 14 | count(*)这么慢,我该怎么办?

    在开发系统的时候,你可能经常需要计算一个表的行数,比如一个交易系统的所有变更记录总数.这时候你可能会想,一条select count(*) from t 语句不就解决了吗? 但是,你会发现随着系统中记 ...

  10. PostgreSQL、Greenplum 日常监控 和 维护任务

    背景 Greenplum的日常监控点.评判标准,日常维护任务. 展示图层 由于一台主机可能跑多个实例,建议分层展示. 另外,即使是ON ECS虚拟机(一个虚拟机一个实例一对一的形态)的产品形态,实际上 ...