Vue的计算属性

最新推荐文章于 2024-10-07 15:25:09 发布

梦魇师

最新推荐文章于 2024-10-07 15:25:09 发布

阅读量348

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_51629071/article/details/124650743

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

Vue的计算属性
- 1.代码
- 2.效果

Vue的计算属性

1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			姓：<input type="text" v-model="firstName"><br>
			名：<input type="text" v-model="lastName"><br>
			<span>全名：{{fullName}}</span>
		</div>
		<script type="text/javascript">
			var vm =new Vue ({
				el:"#root",
				data:{
					firstName:"张",
					lastName:"三"
				},
				computed: {//计算属性
					fullName:{
						//get有什么作用?当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
						//get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时。
						get(){
							console.log("计算属性被调用了");
							return this.firstName+"-"+this.lastName;
						}
					}
				}
			});
		</script>
	</body>
</html>