<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. php 图片与base64互转

    header('Content-type:text/html;charset=utf-8'); //读取图片文件,转换成base64编码格式 $image_file = '1.png'; $image ...

  2. 模仿DotnetCore中间件的方式,做一个列表过滤的功能

    我们的很多功能当中都会遇到对版本进行过滤的场合,例如你可能需要对列表中的数据的时间进行过滤.版本过滤.渠道以及地区信息进行过滤. 原本的做法:设计很多个过滤方法,通过枚举的方式组合,选择需要过滤哪些方 ...

  3. JAVA HASH学习

    就HASH的目的来说,是为了解决内容摘要与快速索引的问题:而其算法也比较多样. JDK实现中,对String类的hashcode()进行了重载: public int hashCode() { int ...

  4. Maven创建本地仓库

    1:创建仓库目录 在D盘Program Files目录下创建repository目录 2:修改settings.xml ​ ​ D:\ProgramFiles\repository  是我们创建的本地 ...

  5. 牛客练习赛50 D tokitsukaze and Event (最短路,思维)

    牛客练习赛50 D tokitsukaze and Event 链接:https://ac.nowcoder.com/acm/contest/1080/D来源:牛客网 时间限制:C/C++ 1秒,其他 ...

  6. SQL SERVER中如何查找存储过程中一段代码

    select b.name ,a.text from syscomments a,sysobjects b where and object_id(b.name)=a.id and b.xtype i ...

  7. [转]BIO/NIO/AIO的几个思考

    原文:https://www.jianshu.com/p/ff29e028af07 ----------------------------------------------------- BIO/ ...

  8. SqlHelper助手

    正在机房重构中,自己一直在摸索,刚开始听说SqlHelper只是感觉很高深,都不知道是用来做什么用的,只是看见别人的博客上写的可以用来帮助连接数据库.但自己没有什么特别的感觉,就认真的去查阅资料来具体 ...

  9. 织梦cms导航高亮显示栏目及首页的方法

    直奔主题了,高亮显示教程适用于您具有一定的CSS基础才可以了,前提把高亮显示的样式写好,然后再开始高亮显示标签适用. <li {dede:field name=typeid runphp=&qu ...

  10. 题解 CF375D 【Tree and Queries】

    首先,子树上的查询问题可以通过$DFS$序转为序列问题 再一看,没有修改,可以离线,这不就是莫队吗? 我们用$sum_i$表示出现次数$\geq i$的个数 用$val_i$表示第$i$种颜色的出现次 ...