Vue计算属性和函数的对比

最新推荐文章于 2024-07-22 09:04:09 发布

wendyNo

最新推荐文章于 2024-07-22 09:04:09 发布

阅读量159

点赞数

分类专栏： JS 文章标签： vue.js

本文链接：https://blog.csdn.net/wendyno/article/details/112472237

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<body>
	<div id="app">
		<!--1、拼接 语法过于繁琐 -->
		<h2>{{firstName}} {{lastName}}</h2>
		<!--2、通过函数  当被调用多次的时候 函数会被执行多次 -->
		<h2>{{getFullName()}}</h2>
		<!-- 3、通过计算属性 当被调用多次的时候 函数只会执行一次 效率更高 -->
		<h2>{{FullName}}</h2>
	</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
	const app = new Vue({
		el:'#app',//用于挂载管理的元素
		data:{
			firstName:'Gary', 
			lastName:'Yao', 
		},
		methods:{
			getFullName:function(){
				console.log('getFullName');
				return this.firstName + ' '+ this.lastName;
			}
		},
		computed:{
			FullName:function(){
				console.log('FullName');
				return this.firstName + ' '+ this.lastName;
			}
		}
	});
</script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wendyNo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性和函数的对比

<body> <div id="app">  <h2>{{firstName}} {{lastName}}</h2>  <h2>{{getFullName()}}</h2>  <h2&
复制链接

扫一扫