angular点击事件和表单事件
<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点击事件和表单事件的更多相关文章
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- jQuery-3.事件篇---表单事件
jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...
- jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Day050--jQuery表单事件 轮播图 插件库 ajax
表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...
- (96)Wangdao.com_第二十九天_表单事件
表单事件 input 事件 select 事件 change 事件 invalid 事件 reset 事件 submit 事件 ...
- javascript中的常用表单事件用法
下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...
- 2018-06-25 js表单事件、三个高度和Ajax异步通讯技术
表单事件: onfocus -> 表单控件得到焦点时触发: obj_ipt.onfocus=function(){}; onblur -> 表单控件失去焦点时: onchange -> ...
随机推荐
- Mongodb创建用户Error: couldn’t add user: Use of SCRAM-SHA-256 requires undigested passwords
解决方案:修改mechanisms加密方式为SCRAM-SHA-1 db.createUser({ user: "admin", pwd: "xxx", rol ...
- uWSGI ,WSGI和uwsgi的区别
1.1.为方便理解,uWSGI ,WSGI和uwsgi在网站项目流程图中的功能如下: 1.2.网站项目结构图 2.uWSGI ,WSGI和uwsgi的区别 2.1 WSGI: WSGI,全称 Web ...
- WPF 反编译后错误处理
1. 首先,手动创建一个WPF工程(WpfApplicationReflectorDemo) 2. 把生成的WpfApplicationReflectorDemo.exe 拖到ILSpy里 3.点击 ...
- linux systemd 从简单的例子入门
linux systemd 从简单的例子入门 网上很多相关链接,一上来就给一大堆命令和讲解,让人头都大. 我们希望有一个service(服务),让它在开机启动的时候就执行. 用 root 登陆以后: ...
- 1127 模型层orm表操作
目录 昨日回顾 模型层 1.配置测试脚本 1.1 应用下tests文件 1.2 新建任意名称文件 2. 数据的增删改查 2.1 创建数据 2.2 修改数据 2.3 删除数据 2.4查询数据 十三门徒 ...
- python 查询每周最后一个工作日
背景: 做定时任务时,一般都是写死每周五XXXXX,但有时遇到节假日的情况,周五可能不是本周最后一个工作日 代码如下: import urllib2,datetime,json nowTime = d ...
- 使用SpringTask 进行Java定时任务开发
(我这里的案例 是模拟 将项目包放到tomcat里面运行 ) 新建一个Java Web的Maven项目....... 此过程省略... 项目结构如图: 1.pom.xml 配置 <?xml ve ...
- aiohttp 支持异步的网络请求模块
通常在进行网络数据采集时候我们会用到requests,urllib等模块,但是这些模块在使用中并不支持异步,所以今天我们介绍一个支持异步网络请求的模块aiohttp. 首先我们使用flask简单的搭一 ...
- HDU-2082-找单词(母函数)
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2082 题意: 假设有x1个字母A, x2个字母B,..... x26个字母Z,同时假设字母A的价值为1, ...
- [Angular 8] Custom Route Preloading with ngx-quicklink and Angular
In a previous lesson we learned about implementing a custom preloading strategy. That gives you a lo ...