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 -> ...
随机推荐
- Linux命令——killall 、kill 、pkill、xkill
参考:killall .kill .pkill 命令详解 Using kill, killall, and pkill 4 Ways to Kill a Process – kill, killall ...
- Linux:入门基础
一.操作Linux必知必会基础知识 二.在Linux命令下查看命令帮助信息 三.Linux挂机重启注销命令 四.Linux显示系统IP地址 一.操作Linux必知必会基础知识 1.Linux命令行组成 ...
- Nginx练习练习玩玩
Date:2019-11-9 读前思考: 对于NGINX,一般会问什么? 面试官会从哪方面入手? 面试官到底想考察什么? 你做好准备了吗? 如果对于初学者,往往可以通过面试题来提升对某一个技术的了解和 ...
- [终章]进阶20-流程控制结构--if/case/while结构 - 三个while的存储过程案例(批量生成表单数据) - 随机长度的随机字符串的存储过程案例
. mysql 存储过程中尽量使用 @变量 而不用局部变量, @变量不容易报错!权限小,更改一下就报错! . sql中判断相等'=' ,用'=' 不用'=='. . #流程控制结构 /* 顺序结构: ...
- Jmeter - 生成Html报告
同步更新至个人博客:https://njlife.top/2019/07/12/Jmeter-%E7%94%9F%E6%88%90Html%E6%8A%A5%E5%91%8A/ Jmeter GUI提 ...
- 四舍五入toFoxed方法
四舍五入的方法: Number.prototype.toFixed = function (n) { if (n > 20 || n < 0) { throw new RangeError ...
- Git----常见工作管理总结
1.工作流程模式: 首先,可以试图用git push origin branch-name推送自己的修改 如果推送失败,则因为远程分支比你的本地更新,需要先用git pull试图合并 如果合并有冲突, ...
- c#压缩和解压缩
C# 文件/文件夹压缩解压缩 项目上用到的,随手做个记录,哈哈. 直接上代码: 1 using System; 2 using System.Data; 3 using System.Config ...
- RMQ问题【模板】
概念 RMQ 是英文 Range Maximum/Minimum Query 的缩写,表示区间最大(最小)值. 解决 RMQ 问题的主要方法有两种,分别是 ST 表和线段树.本文主要讲 ST 表. S ...
- 洛谷P2577 午餐【贪心】【线性dp】
题目:https://www.luogu.org/problemnew/show/P2577 题意:n个人每个人有一个打饭时间和吃饭时间,将他们分成两个队伍.每个人打到饭之后就马上去吃饭.问怎么安排可 ...