Vue学习笔记——v-on修饰符

渣渣圆

于 2021-03-06 00:30:06 发布

阅读量218

点赞数

分类专栏： Vue 文章标签： vue

原文链接：https://blog.csdn.net/weixin_43402353/article/details/109712279

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

v-on修饰符

修饰符：就是指定事件触发条件，比如按下键盘，监听键盘
stop-调用event.stopPropagation()
.prevent-调用event.preventDefault()
.{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调
.once-只触发一次回调


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h2>{{message}}</h2>
  <!--  .stop修饰符的使用-->
  <div @click="divClick">
    <button @click.stop="btn1Click">按钮1</button>
  </div>
  <br>
<!--  .prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  <br>
<!--  .监听某个键盘的键帽的点击-->
<!--  keyup.enter 监听回车键-->
  <input type="text" @keyup="keyUp">
  <br><br>
<!--  .once修饰符的使用-->
  <button @click.once="btn2Click">按钮2</button>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"Hello Ting,I am Key!"
    },
    methods:{
      btn1Click(){
        console.log("btn1Click");
      },
      divClick(){
        console.log("divClick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      btn2Click() {
        console.log("btn2Click");
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

渣渣圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记——v-on修饰符

v-on修饰符修饰符：就是指定事件触发条件，比如按下键盘，监听键盘stop-调用event.stopPropagation().prevent-调用event.preventDefault().{keyCode | keyAlias}-只当事件是从特定键触发时才触发回调.once-只触发一次回调<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
复制链接

扫一扫

专栏目录