vue.js ES6对象字面量的增强写法

news2024/9/22 1:23:05

1.属性的增强写法

ES5的写法：
在这里插入图片描述
运行效果

ES6的写法：

在这里插入图片描述
运行效果

在这里插入图片描述
2.函数的增强写法
ES5的写法：

ES6的写法：

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>ES6对象字面量的增强写法</title>
		<script src="../../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			//angular-->google
			//TypeScript(microsoft)-->ts(类型检测)
			//flow(facebook) -->
			const obj = new Object();
			
			const obj = {
				name:'xiaonaihu',
				age:18,
				run:function() {
					console.log("在奔跑！");
				},
				eat:function() {
					console.log("在吃东西！");
				}
			}
			
			//1.属性的增强写法
			const name = 'xiaonaihu';
			const age = 18;
			const height = 1.88;
			//ES5的写法
			const obj = {
				name: name,
				age: age,
				height: height
			}
			console.log(obj);
			//ES6的写法
			const obj = {
				name,
				age,
				height
			}
			console.log(obj);
			
			//2.函数的增强写法
			// ES5的写法
			const obj = {
				run:function() {
					console.log("在奔跑！");
				},
				eat:function() {
					console.log("在吃东西！");
				}
			}
			console.log(obj);
			
			//ES6的写法
			const obj = {
				run() {
					console.log("在奔跑！");
				},
				eat() {
					console.log("在吃东西！");
				}
			}
			console.log(obj);
		</script>
	</body>
</html>