<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. 基于CentOS设置和使用Yum软件仓库

    参考:How To Set Up and Use Yum Repositories on a CentOS 6 VPS 参考:CentOS yum 源的配置与使用 介绍 Yum仓库是Linux软件仓库 ...

  2. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  3. 3D Experience — 产品协同研发平台

    随着产品复杂程度的提升,市场竞争愈加激烈,基于模型的正向研发已经作为有效的应对手段被广泛接受.但研发流程中仍然存在复杂功能架构定义困难.多方案难以权衡.多系统难以联合仿真,仿真效率低,验证不充分等问题 ...

  4. Luogu P3243 菜肴制作

    Luogu P3243 菜肴制作 神神奇奇的拓扑排序,也就是借这道题学习一下大名鼎鼎的Toposort了-- #include<bits/stdc++.h> #define N 10001 ...

  5. ES6 正则扩展

    一.新增 flags 属性 ES6 为正则表达式新增了flags属性,会返回正则表达式的修饰符. // ES5 的 source 属性 // 返回正则表达式的正文 /abc/ig.source // ...

  6. python(列表及列表的相关操作、元组和range)

    1.什么是列表 列表是一个课表的数据类型 列表有[]来表示,每一项元素用逗号隔开,列表什么都能装.是能装对象的对象. 列表可以装大量数据. 2.列表的索引和切片 列表和字符串一样,也有索引和切片.只不 ...

  7. springMvc--接受请求参数

    作者:liuconglin 接收基本类型 表单: <h1>接受基本类型参数到Controller</h1> <form action="/param/test& ...

  8. TDOA Delayed Tx 实现以及验证

    在博文:https://www.cnblogs.com/tuzhuke/p/11638221.html 中描述了delayed tx实现方法,这里贴出全部delayed tx 代码以及对应验证代码 1 ...

  9. React应用数据传递的方式

    1. props属性 典型的React应用,数据通过props按照自上而下(父->子)的顺序传递数据. 2. Context传值 1. 应用场景 对于一些应用中全局性的属性(如UI主题.语言.登 ...

  10. Greenplum 查看连接与锁信息数据字典

    查看系统中会话/连接/SQL与锁情况 1.查看当前活动的客户端连接数  SELECT count(*) FROM pg_stat_activity WHERE NOT pid=pg_backend_p ...