松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › v-on的使用

v-on的使用

迦娜王
3年前Vue2.x从零开始
952 0 0

v-on的使用

v-on主要使用在一些事件上。比如点击事件。简写方式@eventName。
代码:

<template>
  <div>
    <button @click="add">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(){
            this.value ++
        }
    }
}
</script>

<style>
</style>

上述代码演示了按钮的点击事件。其他的事件同样可以用这种方式进行绑定。如果你需要原始的event对象:

<template>
  <div>
    <button @click="add($event)">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(e){
            console.log(e)
            this.value ++
        }
    }
}
</script>

有时候多个元素重叠在一起,此时的点击事件可能会发生传递,如果需要阻止事件冒泡,我们只要在事件后面加一个修饰符.stop就可以了,现在的代码变成了

<template>
  <div>
    <button @click.stop="add($event)">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(e){
            console.log(e)
            this.value ++
        }
    }
}
</script>

一般情况下这样就能阻止事件冒泡,但是在有些情况下不一定可以生效,比如在leaflet组件中,事件被2次封装过,那么.stop修饰符是无效的。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
v-for的使用
上一篇
动态样式绑定
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • v-on的使用
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top