vue.js 事件

贵哥的编程之路

发布于 2021-03-02 15:43:50

6.1K0

发布于 2021-03-02 15:43:50

1.使用事件的第一种方式：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script type="text/javascript" src='vue.min.js'></script>
	<title></title>
	<style type="text/css">
		div{width: 200px;height: 200px;background-color: red;}
	</style>
</head>
<body>
	<div v-on:click="alert"></div>
	<script type="text/javascript">
		new Vue(
			{
				el:'body',
				data:{
					msg:'cyg&liwen'
				},
				methods:
				{
					alert:function()
					{
						alert(this.msg);
					}
				}
			}
		);
	</script>
</body>
</html>

解释：

代表methods代表使用的是vue的事件。 alert代表函数名

代表当前对象的msg属性.

效果：

2.使用事件的第二种方式：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script type="text/javascript" src='vue.min.js'></script>
	<style type="text/css">
		div{width: 100px;height: 100px;background: black;}
	</style>
</head>
<body>
	<input type="button" name=""  value="显示／隐藏" @click='changed'/>
	<div v-show='dis'></div>
	<script type="text/javascript">
		new Vue({
			el:'body',
			data:{
				dis:true
			},
			methods:{
				changed:function(){
					this.dis=!this.dis;
				}
			}
		})
	</script>
</body>
</html>