事件处理

2020-12-29 10:53 更新

监听事件

监听事件有两种方式。

使用on监听:

  1. <text onclick="doThis">Click me!</text>

使用v-on指令以及缩写方式监听:

  1. <text v-on:click="doThis">Click me!</text>
  2. <text @click="doThis">Click me!</text>

事件处理方法

事件的处理方法需要在methods中定义,方法默认包含一个参数,可以通过该参数获取detail、target对象等。

  1. <template>
  2. <text data-name="avm" onclick="doThis">Click me!</text>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'test',
  7. methods: {
  8. doThis(e){
  9. api.alert({
  10. msg:e.target.dataset.name
  11. });
  12. }
  13. }
  14. }
  15. </script>

事件处理方法也可以使用模板的方式,如:

  1. <text onclick={this.doThis}>Click me!</text>

直接执行JavaScript代码

处理事件也可以使用直接执行JavaScript代码的方式,如:

  1. <text onclick="api.alert({msg:'avm'});">Click me!</text>

或者

  1. <template>
  2. <text onclick="doThis('avm');">Click me!</text>
  3. </template>
  4. <script>
  5. export default {
  6. name: 'test',
  7. methods: {
  8. doThis(msg){
  9. api.alert({
  10. msg: msg
  11. });
  12. }
  13. }
  14. }
  15. </script>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号