zoukankan      html  css  js  c++  java
  • v-On的修饰符

    v-on的修饰符

    • 主要有一下几种:
    1. .stop 阻止事件冒泡
    2. .prevent 阻止默认事件。重新定义新的事件。
    3. .once 让事件只发生一次。不会重复触发。
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    <div id="app">
      <div @click="clickdiv">
        <!-- click 的阻止冒泡,修饰符-->
        <h2 @click.stop="clickh2">点击</h2>
    <!--    click  .prevent阻止默认事件,可以重新定义提交数据的方式-->
        <form action="baidu">
          <input type="submit" value="提交" @click.prevent.stop="submitclick">
        </form>
    <!--监听键盘事件,修饰符可以监听某一个案件的点击。-->
        <input type="text" @keyup.enter="clickkeyup('keyup')">
    <!--    修饰符,第一次点击才有效果。-->
        <input type="submit" value="提交" @click.stop.once="clicksubmit">
      </div>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        methods: {
          clickdiv() {
            console.log('clickdiv被点击')
          },
          clickh2() {
            console.log('clickh2被点击')
          },
          submitclick() {
            console.log('提交数据')
          },
          clickkeyup(k) {
            console.log(k)
          },
          clicksubmit() {
            console.log('点击提交按钮。。。。。。')
          }
        }
      })
    </script>
    </body>
    </html>
    
  • 相关阅读:
    对象属性键值[key]属性问题
    理解 JavaScript 中的 for…of 循环
    vue初学篇----过滤器(filters)
    CSS变量
    SCSS !default默认变量
    vue 集成 NEditor 富文本
    如何在Github上面精准搜索开源项目?
    OSS介绍
    键盘各键对应的编码值(key code)
    网易云音乐歌单生成外链播放器
  • 原文地址:https://www.cnblogs.com/ch2020/p/14827589.html
Copyright © 2011-2022 走看看