# 事件绑定

格式

<text onclick="{{press}}"></text>
1

可以简写为：

<text @click="{{press}}"></text>
1

事件回调支持的写法（其中{{}}可以省略）：

<text @click="press"></text>
1

"fn"：fn 为事件回调函数名（在<script>中有对应的函数实现），上例中press为事件回调函数。

传参

# 常量

<template>
    <div class="demo-page">
        <text for="{{list}}" key="{{$idx}}" onclick="handle($idx,$item)">{{$item}}</text>
    </div>
</template>

<script>
    export default {
        data: {
            list:[1,2,3,4,5]
        },
        handle(idx,item,$evt){
            console.log(idx)
            console.log(item)
            console.log($evt)
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

示例图：

event-on

# 变量

<script>中定义的页面的数据变量(前面不用写 this)

<template>
    <div class="demo-page">
        <text for="{{list}}" key="{{$idx}}" onclick="handle(total,$item)"> {{$item}}</text>
    </div>
</template>

<script>
    export default {
        data: {
            list:[1,2,3,4,5],
            total:0
        },
        handle(total,num,$evt){
            console.log(total)
            console.log(num)
            console.log($evt)
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

示例图：

event-on

注意：

回调函数被调用时，会在参数列表末尾自动添加一个 evt 参数，通过 evt 参数访问回调事件相关上下文数据。