首页 > 代码库 > 事件处理

事件处理

2024-11-27 12:32:02   204人阅读

监听事件

v-on 指令监听DOM 事件触发一些JavaScript

 	<div id="example">
 		<button v-on:click="counter +=1">add 1</button>
 		<p>这个按钮被点击了 {{counter}}</p>
 	</div>
 	<script>
 		new Vue({
 			el:‘#example‘,
 			data:{
 				counter:0
 			}
 		})
 	</script>

 方法事件处理器

事件处理的逻辑很复杂，直接把JavaScript 代码写在v-on 指令中是不可行的。因此，v-on 可以接收一个定义的方法调用。

<button v-on:click="example1">example1</button>
//js
new Vue({
            el:‘#example‘,
            data:{
                name: ‘Vue.js‘
            },
            methods:{
                example1:function(event){
                    alert(‘Hello ‘+this.name+‘ !‘)
                    if(event){
                        alert(event.target.tagName)
                    }
                }
            }
        })

內联处理器方法

<input type="button" value="say hi" v-on:click="say(‘hi‘)">
//js
methods:{
                say:function(message){
                alert(message)
            }

事件修饰符

.stop 阻止事件冒泡

.prevent 提交时间不再重载页面

<div v-on:click="parent">
    <div v-on:click.stop="child">{{message}}</div>
</div>
//
methods:{
                parent:function(){
                    alert(‘parent‘)
                },
                child:function(){
                    alert(‘child‘)
                }
            }

 

事件处理


联系
我们