05 vue 计算属性的练习 1 methods \computed\ watch三种方法对比实例

技术~子云

已于 2022-10-22 19:40:48 修改

阅读量151

点赞数

分类专栏： vue

于 2022-10-22 19:09:18 首次发布

本文链接：https://blog.csdn.net/davice_li/article/details/127465712

版权

Vue 计算属性 watch 实时更新数据绑定

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- <div>{{firstName +""+lastName}}</div> -->
			<div>{{fullName}}</div>
			<div>{{age}}</div>
		</div>

		<script type="text/javascript">
			
			var vm = new Vue({
				el: "#app",
				data:{
					firstName:"jack",
					lastName:"lee",
					fullName:"jack lee",
					age:12
				},
				//属性调用时 <div>{{fullName()}}</div> 按方法调用  这种方式不推荐使用
				// methods:{
				// 	fullName:function(){
				// 		return this.firstName +" "+this.lastName
				// 	}
				// },
				// 计算属性   ctrl +/  快速注释   属性有缓存
				// computed:{
				// 	fullName:function(){
				// 		console.log("computed 1");
				// 		return this.firstName +" "+this.lastName;
				// 	}
				// },
				//事件监听的方式实现   属性有缓存
				watch : {
					firstName: function(){
						console.log("计算了一次");
						this.fullName = this.firstName + " " +this.lastName;
					},
					lastName: function() {
						console.log("计算了一次");
						this.fullName = this.firstName + " " +this.lastName;
					}

				}

			})
		</script>
	</body>
</html>