• 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>
    
  • 相关阅读:
    了解大数据的特点、来源与数据呈现方式
    结对项目-四则运算 “软件”之升级版
    个人项目-小学四则运算 “软件”之初版
    大数据应用期末作业
    分布式文件系统HDFS 练习
    安装Hadoop
    爬虫大作业
    爬取全部的校园新闻
    理解爬虫原理
    中文词频统计与词云生成
  • 原文地址:https://www.cnblogs.com/ch2020/p/14827589.html
Copyright © 2020-2023  润新知