vue 绑定事件 学习 例子 整理 记录 自学 前端

                                        vue 绑定事件 学习 例子 整理 记录 自学 前端

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div id="app">
		<p v-if="show">冠状病毒</p>
		<button v-on:click="handleClose">{{msg}}</button>
		<p v-on:mouseover="entry" 
			@mouseleave="leave" 
			@dblclick="dblClick" 
			v-bind:style="active">{{gzbd}}</p>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el:'#app',
			data:{
				show: true,
				msg: '点击隐藏',
				gzbd: '冠状病毒',
				active: ''
			},
			methods:{ 
				handleClose:function() {
					if (this.show == false) {
						this.msg = '点击隐藏';
						this.show = true;
					} else {
						this.msg = '点击显示';
						this.show = false;
					}
				},
				entry:function() {
					this.active = 'color: red';
				},
				leave:function() {
					this.active = 'color: blue';
				},
				dblClick:function() {
					this.gzbd = this.gzbd.split('').reverse().join('');
					this.active = 'color: black';
				}
			}
		})
	</script>
</body>
</html>