<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. 解决windows 1903 alt + tab 切换卡顿

    右击此电脑图标 选择管理 服务和应用程序 服务 禁用system interface foundation service

  2. 交付Dubbo微服务到kubernetes集群

    1.基础架构 1.1.架构图 Zookeeper是Dubbo微服务集群的注册中心 它的高可用机制和k8s的etcd集群一致 java编写,需要jdk环境 1.2.节点规划 主机名 角色 ip hdss ...

  3. KubeEdge,一个Kubernetes原生边缘计算框架

    ​KubeEdge成为第一个Kubernetes原生边缘计算平台,Edge和云组件现已开源! 开源边缘计算正在经历其业界最具活力的发展阶段.如此多的开源平台,如此多的整合以及如此多的标准化举措!这显示 ...

  4. eclipse cdt 代码对齐

    ctrl + shift + F 快速对齐 平时对小节太不重视了 .

  5. js rsa sign使用笔记(加密,解密,签名,验签)

    你将会收获: js如何加密, 解密 js如何签名, 验签 js和Java交互如何相互解密, 验签(重点) 通过谷歌, 发现jsrsasign库使用者较多. 查看api发现这个库功能很健全. 本文使用方 ...

  6. 大数据之路week06--day07(Linux中的mysql的离线安装)

    这里我提供 服务端和客户端的两个jar包的百度云,也是我使用的 链接:https://pan.baidu.com/s/11a3LT-ENZ8n9IF19-VjmWA 提取码:bdls 离线安装Mysq ...

  7. GitHub常用命令及使用

    GitHub使用介绍 摘要: 常用命令: git init 新建一个空的仓库git status 查看状态git add . 添加文件git commit -m '注释' 提交添加的文件并备注说明gi ...

  8. c++两种字符串赋值方式 并介绍 C语言下遍历目录文件的方式

    c++字符串声明:一种是声明字符数组并赋值,另一种是直接声明string类 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #incl ...

  9. ADB命令使用详解

    ADB是一个 客户端-服务器端 程序, 其中客户端是你用来操作的电脑, 服务器端是android设备. 1.连接android设置 adb connect 设备名 例如: adb connect 12 ...

  10. SIGAI机器学习第四集 基本概念

    大纲: 算法分类有监督学习与无监督学习分类问题与回归问题生成模型与判别模型强化学习评价指标准确率与回归误差ROC曲线交叉验证模型选择过拟合与欠拟合偏差与方差正则化 半监督学习归类到有监督学习中去. 有 ...