Vue.js 事件处理器

最新推荐文章于 2022-09-29 12:00:43 发布

随枫潜入夜

最新推荐文章于 2022-09-29 12:00:43 发布

阅读量112

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107897013

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

事件监听可以使用 v-on 指令：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
	  if (event) {
		  alert(event.target.tagName)
	  }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>

点击后：
在这里插入图片描述

在这里插入图片描述
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

在这里插入图片描述

在这里插入图片描述
其他：
1、

var app = new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    computed: { 
        name1: function(){  alert('222') },
        greet: function (event) {
            // `this` 在方法里指当前 Vue 实例
            alert('Hello ' + this.name + '!')
            // `event` 是原生 DOM 事件
            if (event) {
                alert(event.target.tagName)
            }
        }
    }
})
// 也可以用 JavaScript 直接调用方法

2、当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：
在这里插入图片描述

在这里插入图片描述
3、点击按钮的不同操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

<div id="app">
<input type="button"
	value="单击后增加"
	@click="m +=1"
	>

<input type="button"
	value="绑定函数的按钮"
	@click="add"
	>

<input type="button"
	value="绑定可传值函数的按钮"
	@click="add2(3,4)"
	>

<div>这个按钮被点击了 {{ m }} 。</div>
</div>

<script>
new Vue({
	el: '#app',
	data: {
		m:0
	},

	methods:{
		add:function(e){
			e.stopPropagation();
			this.m +=2;
		},

		add2:function(m,n){
			this.m=m+n;
		}
	}

})

</script>

</body>
</html>

在这里插入图片描述

4、
在这里插入图片描述

5、

6、

随枫潜入夜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue.js 事件处理器

事件监听可以使用 v-on 指令：<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><div id=
复制链接

扫一扫