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

vue 绑定事件学习例子整理记录自学前端<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body><div id="app"><p v-if="show">冠状病毒</p&...

托马斯小火车喷雾又喷烟，一直喷，喷喷喷.

14840人浏览 · 2020-03-03 16:45:52

托马斯小火车喷雾又喷烟，一直喷，喷喷喷. · 2020-03-03 16:45:52 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^