ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue事件对象$event [打印本页]

---

作者: 卖不甜枣    时间: 2025-1-12 13:42
标题: vue事件对象$event
事件参数可以获取event对象和通过事件传递数据
获取 event 对象

1. <template>
2.    <h1>Hello world</h1>
3.    <button @click="addCount">Add</button>
4.    <p>{{ count }}</p>
5. </template>
6. <script>
7.     export default{
8.         data(){
9.             return{
10.                 count:0
11.             }
12.         },
13.         methods:{
14.             addCount(e){
15.                 console.log(e)
16.                 this.count++;
17.             }
18.         }
19.     }
20. </script>

复制代码

注意：vue当中的event对象，就是原生JS的Event对象。

1. <template>
2.    <h1>Hello world</h1>
3.    <button @click="addCount">Add</button>
4.    <p>{{ count }}</p>
5. </template>
6. <script>
7.     export default{
8.         data(){
9.             return{
10.                 count:0
11.             }
12.         },
13.         methods:{
14.             addCount(e){
15.                // vue当中的event对象，就是原生JS的Event对象\
16.                e.target.innerHTML = "Add" + this.count
17.                 this.count++;
18.             }
19.         }
20.     }
21. </script>

复制代码

传递参数

1. <template>
2.    <h1>Hello world</h1>
3.    <button @click="addCount('hello')">Add</button>
4.    <p>{{ count }}</p>
5. </template>
6. <script>
7.     export default{
8.         data(){
9.             return{
10.                 count:0
11.             }
12.         },
13.         methods:{
14.             addCount(msg){
15.                 console.log(msg)  
16.                 this.count++;
17.             }
18.         }
19.     }
20. </script>

复制代码

1. <template>
2.    <h1>Hello world</h1>
3.    <p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index">{{ item }}</p>
4. </template>
5. <script>
6.     export default{
7.         data(){
8.             return{
9.                 names:["admin","张三","李四"]
10.             }
11.         },
12.         methods:{
13.             getNameHandler(name){
14.                 console.log(name)
15.             }
16.         }
17.     }
18. </script>

复制代码

传参的过程当中获取 event

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4