zoukankan      html  css  js  c++  java
  • v-on指令监听dom事件

    一、无参

    <div id="J_app">
      <button v-on:click="eatWhat">吃啥</button>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: '我想吃苹果'
      },
      methods: {
        eatWhat: function () {
          alert(this.info) 
        }
      }
    })

    二、有参

    <div id="J_app">
      <p>{{ info }}</p>
      <button v-on:click="eatWhat('苹果')">吃啥</button>
    </div>
    var vapp = new Vue({
      el: '#J_app',
      data: {
        info: '我想吃'
      },
      methods: {
        eatWhat: function (fruit) {
          alert(this.info  + fruit)
        }
      }
    })

    三、事件修饰符

    1、.stop

    <a v-on:click.stop="doSomething">阻止单击事件冒泡</a>

    2、.prevent

    <form v-on:submit.prevent="onSubmit">提交事件不再重载页面</form>
    <form v-on:submit.prevent>只有修饰符</form>

    3、.capture

    <a v-on:click.capture="doSomething">添加事件侦听器时使用事件捕获模式</a>

    4、.self

    <div v-on:click.self="doSomething">事件在元素本身触发回调,而不是子元素。</div>

    5、.once

    <div v-on:click.once="doSomething">点击事件触发一次,不像其它只能对原生的DOM事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。</div>
    <a v-on:click.stop.prevent="doSomething">修饰符可以串联</a>

    修饰符串联顺序不同,效果有可能不同。@click.prevent.self会阻止所有的点击,而@click.self.prevent只会阻止元素上的点击。

  • 相关阅读:
    codevs 1432 总数统计
    codevs3500 快速幂入门题解
    #163. 【清华集训2015】新式计算机
    2989:糖果
    191:钉子和小球
    java 删除所有HTML工具类
    DateTools时间插件
    新的开始
    springBoot---端口,路径数据配置
    springBoot---多个配置文件读取
  • 原文地址:https://www.cnblogs.com/camille666/p/vue_dom_directive_event.html
Copyright © 2011-2022 走看看