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>

相关阅读:
【JavaWeb】讲解：JSTL标签以及MVC设计模式
matlab神经网络求解最优化,matlab神经网络应用设计
网页在线打开PDF_网站中在线查看PDF之pdf.js
C语言向MySQL插入数据
Node.js--模块化概念+来源（内置、第三方、自己编写）+如何加载
Libvirt-Qemu-Kvm 操作手记
sonarqube-9.6 & postgresql-13安装
RoboTAP：由 Google DeepMind 开发的一款机器人操作系统
写过的最蠢的代码
QWidget | Qt::WindowType 枚举的取值及意义&QFlags 模板类详解

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