当前位置 博文首页 > 小旺的博客：Vue-事件处理器

最大化 缩小

    小旺的博客：Vue-事件处理器

    作者：[db:作者] 时间：2021-08-08 16:15

    v-on指令

    计数器演示

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue-事件处理器</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

	</head>
	<body>
		<div id="app">
		<div>计数器:{{s}}</div>
		<button v-on:click="s+=1">按钮</button>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					s:0
				}
			})
		</script>
	</body>
</html>

    请添加图片描述

    v-on指令调用方法

    调用自定义方法演示

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue-事件处理器</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

	</head>
	<body>
		<div id="app">
		
		<button v-on:click="s">按钮</button>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					s:function(){
						alert("hello");
					}
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    在事件中读取data里的值

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue-事件处理器</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

	</head>
	<body>
		<div id="app">
		
		<button v-on:click="s">按钮</button>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					a:"xiaowang"
				},
				methods:{
					s:function(event){
						alert(this.a);
					},
				}
			})
		</script>
	</body>
</html>

    在这里插入图片描述

    方法参数设置方式

    1.变量操作

    v-on:click="s+=1"

    2.调用Vue对象（方法）

    v-on:click="add"

    2.调用Vue对象（方法）加参数

    v-on:click="add(a)"
    cs
    上一篇：阳光梦的专栏：nginx-GET /favicon.ico HTTP/1.1
    下一篇：没有了