事件处理
2020-12-29 10:53 更新
监听事件
监听事件有两种方式。
使用on监听:
<text onclick="doThis">Click me!</text>
使用v-on指令以及缩写方式监听:
<text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>
事件处理方法
事件的处理方法需要在methods中定义,方法默认包含一个参数,可以通过该参数获取detail、target对象等。
<template>
<text data-name="avm" onclick="doThis">Click me!</text>
</template>
<script>
export default {
name: 'test',
methods: {
doThis(e){
api.alert({
msg:e.target.dataset.name
});
}
}
}
</script>
事件处理方法也可以使用模板的方式,如:
<text onclick={this.doThis}>Click me!</text>
直接执行JavaScript代码
处理事件也可以使用直接执行JavaScript代码的方式,如:
<text onclick="api.alert({msg:'avm'});">Click me!</text>
或者
<template>
<text onclick="doThis('avm');">Click me!</text>
</template>
<script>
export default {
name: 'test',
methods: {
doThis(msg){
api.alert({
msg: msg
});
}
}
}
</script>
以上内容是否对您有帮助:
← 数据绑定
更多建议: