<!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>
.father {
width: 200px;
height: 200px;
background-color: skyblue;
}
.son {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<h1>@keyup.enter ---> 键盘回车监听</h1>
<input type="text" @keyup.enter="fn" v-model="userName">
<h1>v-model修饰符</h1>
<h3>v-model.trim ---> 去除首尾空格</h3>
<input type="text" v-model.trim="user">
<h3>v-model-number -----> 转数字</h3>
<input type="text" v-model.number="num">
<h1>事件修饰符</h1>
<h3>@事件名.stop ----> 阻止冒泡</h3>
<div class="father" @click="father">
<div class="son" @click.stop="son"></div>
</div>
<h3>@事件名.prevent ----> 阻止默认行为</h3>
<a href="https://yiyan.baidu.com/" @click.prevent>阻止默认行为</a>
</div>
<!-- 引入的是开发版本包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
// 通过el配置选择器,指定vue管理的是哪个盒子
el: '#app',
// 通过data提供数据
data: {
userName: '',
user: '',
num: ''
},
methods: {
fn() {
console.log('键盘回车监听', this.userName);
},
father() {
alert('父级')
},
son() {
alert('子级')
}
}
})
</script>
</body>
</html>
指令修饰符
最新推荐文章于 2024-07-25 09:37:37 发布