3.5 vue计算属性的setter 

<!DOCTYPE html>
<html>

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

<body>
	<div id="app">
		<p>{{getName()}}</p>
		<p>{{fullName}}</p>
		<!-- fuck oriented object -->
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				firstName:'foo',
				lastName:'bar'
			},
			methods:{
				getName(){
					return this.firstName+' '+this.lastName;
				}
			},
			computed:{
				/* fullName(){
					return this.firstName+' '+this.lastName;
				} */

				fullName:{
					get(){	//对应getter
						return this.firstName+' '+this.lastName;
					},
					set(newValue){	//对应setter
						// console.log(123);
						this.firstName=newValue[0];
						this.lastName=newValue.substr(1);
					}
				}
			}
		});

		//vm.fullName='张三';

		var obj={
			age:12,
			name:'kaivon'
		}

		/*
			属性描述对象
				setter	存值函数
				getter	取值函数 
		 */
	</script>
</body>

</html>

　　

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