vue点击事件总结
@click.once="clickA" 只允许点击一次@click.stop="clickB" 阻止事件冒泡v-on:keyup.delete="clearFn" 点击delete键清空v-on:keyup.enter="clearFn" 点击enter键清空v-on:keyup.enter.65="teamFn" 使用组合键v-model.lazy.trim="msg" 清空前后的空格效果v-
·
@click.once = "clickA" 只允许点击一次
@click.stop = "clickB" 阻止事件冒泡
v-on:keyup.delete="clearFn" 点击delete键清空
v-on:keyup.enter="clearFn" 点击enter键清空
v-on:keyup.enter.65="teamFn" 使用组合键
v-model.lazy.trim="msg" 清空前后的空格效果
v-model.number="age" 将输入的值变为数字,相加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#idA{
width: 300px;
height: 300px;
background-color: orange;
}
#idB{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="app">
<!-- @事件名.prevent 阻止默认事件 -->
<a href="http://www.baidu.com">百度 -1</a><br>
<a href="http://www.baidu.com" @click.prevent>百度 -2</a>
<!-- @click stop 阻止冒泡
once 只能点击一次
修饰符: delete 代表点击了delete
-->
<div :id="idA" @click.once = "clickA">
A
<div :id="idB" @click.stop = "clickB">B</div>
</div>
<hr>
用户名:<input type="text" v-model="username" v-on:keyup.delete="clearFn">
<hr>
用户名:<input type="text" v-model="username" v-on:keyup.enter="clearFn">
<hr>
用户名:<input type="text" v-on:keyup.enter.65="teamFn">
<p>{{msg}}</p>
<!-- lazy 相当于是 由原来的input事件
变为onchange事件 -->
<input type="text" v-model.lazy.trim="msg">
<p>{{age + 10}}</p>
<input type="text" v-model.number="age">
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:"消息",
age:1,
username:"键盘事件",
idA:"idA",
idB:"idB",
},
methods: {
teamFn(){
console.log("组合键");
},
clearFn(){
// delete点击清空
this.username=''
console.log("点击了- keyup");
},
clickA(){
console.log("A---点击了");
},
clickB(){
console.log("B---点击了");
}
},
})
</script>
</body>
</html>
自定义事件的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" @keydown.sss ="handle" v-model="msg">
</div>
<script src="../vue.js"></script>
<script>
Vue.config.keyCodes.sss = 83
new Vue({
el:"#app",
data:{
msg:"消息"
},
methods: {
handle(event){
console.log("调用了",event.keyCode);
}
},
})
</script>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)