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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现