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


html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Documenttitle>
		<script src="../vue.js">script>
	head>
	<body>
		<div id="app">
			
			<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
				},
				//属性调用时 {{fullName()}}
 按方法调用  这种方式不推荐使用
				// 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>

相关阅读:
【linux】计算机内部体系结构
12.面试题——Spring Boot
虚函数表以及虚函数表的继承过程
【vscode下载安装】只需简单一步——使用镜像解决vscode下载慢、失败的问题
Python学习笔记-数字类型
阿里云nginx配置文件不生效
Do you know about Statistics?
云计算基础
4.Nginx优化，谁用谁说好
FFmpeg 解析Glide 缓存下的图片文件报错(Impossible to open xxx）

原文地址：https://blog.csdn.net/davice_li/article/details/127465712