2.计算属性与监听器

小仙女般的张小琦

于 2020-01-27 21:58:44 发布

阅读量820

点赞数

分类专栏： vue2.5入门

本文链接：https://blog.csdn.net/qq_41423485/article/details/104096008

版权

vue2.5入门专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性与监听器</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			姓:<input v-model="firstName" />
			名:<input v-model="lastName" />
			<div id="">
				{{fullName}}
			</div>
			<div id="">
				{{count}}
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#root",
				data:{
					firstName:'',
					lastName:'',
					count: 0
				},
				computed:{  //计算属性
					fullName:function(){
						return this.firstName + ' ' + this.lastName
					}
				},
				watch:{        //侦听器
					// firstName:function(){
					// 	this.count++
					// },
					// lastName:function(){
					// 	this.count++
					// }
					fullName:function(){
						this.count++
					}
				}
			})
		</script>
	</body>
</html>