3.7 vue 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		{{fullName}}<br>
		{{fullName1}}<br>
		亲家：{{getQingjia}}<br>
		全名：{{allName}}
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				firstName: '尼古拉斯',
				lastName: '赵四',
				fullName1: '尼古拉斯 赵四',
				qingjia: '刘能',
				allName: ''
			},
			computed: {
				fullName() {
					return this.firstName + ' ' + this.lastName;
				},
				getQingjia() {
					var name = '';
					setTimeout(() => {
						console.log(1);
						name = '莱昂纳多';
					}, 1000);

					return name + this.qingjia;
				}
			},
			watch: {
				firstName() {
					this.fullName1 = this.firstName + ' ' + this.lastName;
				},
				lastName() {
					this.fullName1 = this.firstName + ' ' + this.lastName;
				},
				qingjia() {
					var name = '';
					setTimeout(() => {
						name = '莱昂纳多';
						this.allName = name + this.qingjia;
					}, 1000);
				}
			}
		});

		/*
			计算属性与侦听器的区别
				1、侦听模式上的区别
					1、计算属性是多对一
					2、侦听器是一对多
				2、异步操作上的区别
					1、计算属性不支持异步操作
					2、侦听器支持异步操作 
		 */
	</script>
</body>

</html>

　　

posted @ 2021-12-31 09:57  JavaShop  阅读(26)  评论(0)    收藏  举报