vue之计算属性之get、set

最新推荐文章于 2024-04-02 10:13:11 发布

想要飞翔的企鹅

最新推荐文章于 2024-04-02 10:13:11 发布

阅读量932

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/PhilsphyPrgram/article/details/122101975

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>菜鸟教程(runoob.com)</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	    <div id="demo">
	    	姓：<input type="text" placeholder="First Name" v-model="firstname"/><br>
	    	名：<input type="text" placeholder="Last Name" v-model="lastname"> <br>
	    	姓名3(双向)：<input type="text" placeholder="Full Name3" v-model="fullName3"> <br/>
	    </div>
		<script type="text/javascript">
			const vm = new Vue({ 
			    el: '#demo',
			    data: {
			    	firstname: 'A',
			    	lastname: 'B',
			    },
			   computed:{
			     //在计算中这个就不是一个函数了，而是一个属性
			   	 fullName3: {
			   	 	//回调函数，计算并返回当前属性的值
			   	 	//回调函数定义，1.你定义的 2.你没有调用 3.但最终他执行了
			   	 	get() {//回调函数：当需要读取相关属性值时回调，根据相关的数据计算并返回当前属性的值
			   	 		console.log("123")
			   	 		return this.firstname+' '+this.lastname
			   	 	},
			   	 	set(value){//回调函数：当属性值发生改变时回调，更新相关的属性数据
			   	 		const vm =value.split(' ')
			   	 		console.log(vm)
			   	 		this.firstname = vm[0]
			   	 		this.lastname = vm[1]
			   	 	}
			    },
			   }
//			  
		  })  
		   vm.$watch('lastname', function(value){//这个是对实体的一个监视通过里边的函数实现
		   		//更新fullName2
			   	this.fullName2 = this.firstname+' '+value
		   })
		</script>
	</body>
</html>

想要飞翔的企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之计算属性之get、set

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>菜鸟教程(runoob.com)</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id
复制链接

扫一扫

专栏目录