angular点击事件和表单事件
<div class="cnblogs_code"><pre><div style="text-align:center">
<h1><span style="color: rgba(0, 0, 0, 1)">
Welcome to {{ title }}</span>!
</h1>
<button class="button" (click)="getData()"><span style="color: rgba(0, 0, 0, 1)"> 点击按钮触发事件
</span></button>
<button class="button" (click)="setData()"><span style="color: rgba(0, 0, 0, 1)"> 点击按钮设置数据
</span></button>
<input type="text" (keyup)="keyUpFn($event)"/>
</div></pre>
</div>
<div class="cnblogs_code">
<pre>import { Component } from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
@Component({
selector: </span>'app-root'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./app.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./app.component.scss'<span style="color: rgba(0, 0, 0, 1)">]
})
export class AppComponent {
title </span>= 'angulardemo'<span style="color: rgba(0, 0, 0, 1)">;
status</span>='2'<span style="color: rgba(0, 0, 0, 1)">;
isShow</span>=<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">;
msg</span>='消息'<span style="color: rgba(0, 0, 0, 1)">
getData(){ </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">自定义方法获取数据</span><span style="color: rgba(0, 128, 0, 1)">*/</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取</span>
alert(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.msg);
}
setData(){
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置值</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.msg='这是设置的值'<span style="color: rgba(0, 0, 0, 1)">;
}
keyUpFn(e){
console.log(e)
}
}</span></pre>
</div>
<p>效果：</p>
<p><img src="https://img2018.cnblogs.com/blog/1100100/201905/1100100-20190520154804611-1087559577.png" alt=""></p>
</div>
<div id="MySignature" role="contentinfo">
最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！<br><br>
来源：https://www.cnblogs.com/loaderman/p/10894544.html
頁:
[1]