vue的常用修饰符案例
事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box,.big{
width: 200px;
height: 200px;
background-color: #f00;
}
.small{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止默认事件 -->
<div class="box" @contextmenu.prevent="menu"></div>
<hr>
<!-- 阻止事件冒泡 -->
<div class="big" @click="bigClick">
<div class="small" @click.stop="smallClick"></div>
</div>
<hr>
<!-- 捕获事件冒泡 -->
<div class="big" @click.capture="bigClick">
<div class="small" @click="smallClick"></div>
</div>
<hr>
<!-- self修饰符 本身-->
<div class="big" @click.self="bigClick">
<div class="small" @click="smallClick"></div>
</div>
<hr>
<!-- once修饰符 一次-->
<div class="big" @click.self.once="bigClick">
<div class="small" @click="smallClick"></div>
</div>
</div>
<script>
new Vue({
el:'#app',
methods:{
menu(){
// e.preventDefault();
console.log("鼠标右键了");
},
bigClick(){
console.log("大盒子被点击了")
},
smallClick(e){
// e.stopPropagation();
console.log("小盒子被点击了")
}
}
})
</script>
</body>
</html>表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- lazy修饰符 数据懒加载-->
<input type="text" v-model.lazy="msg">
<p>{{ msg }}</p>
<hr>
<!-- number修饰符 -->
<input type="text" v-model.number="num">
<button @click="getType()">获取数据类型</button>
<hr>
<!-- trim修饰符 去两头空格-->
<input type="text" v-model.trim="str">
<p>{{ str }}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'',
num:0,
str:''
},
methods:{
getType(){
console.log(this.num,typeof this.num);
}
}
})
</script>
</body>
</html>
本文来自博客园，作者：JackieDYH，转载请注明原文链接：https://www.cnblogs.com/JackieDYH/p/17634676.html
