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企服之家，中国第一个企服评测及商务社交产业平台。