在本篇文章中，我们将通过具体的示例给大家介绍Vue中的计算（Computed ）属性。
什么是计算属性（Computed ）?
计算属性看起来就像Vue中的数据（data）属性，但是我们可以执行一些算术和非算术任务。
<template>
<ul>
<li>First name : {{firstName}}</li>
<li>Last name : {{lastName}}</li>
<li>Full name : {{firstName + ' '+ lastName}}</li>
</ul>
</template>
<script>
data:function(){
return{
firstName: "Sai",
lastName: "Gowtham"
}
}
</script>在上面的代码中，我们创建了两个数据属性firstName和lastName，并将其插入到template中。
立即学习“前端免费学习笔记（深入）”；
如果你查看我们的template，我们在{{}}花括号中添加了Full Name逻辑。
例子
如何创建第一个计算属性的示例。
计算属性在计算属性对象中声明。
<template>
<ul>
<li>First name : {{firstName}}</li>
<li>Last name : {{lastName}}</li>
<!-- 计算属性 -->
<li>Full name : {{fullName}}</li>
</ul>
</template>
<script>
export default{
data:function(){
return{
firstName: "Sai",
lastName: "Gowtham"
}
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
}
}这里我们添加了一个名为fullName的计算属性，它是一个函数，返回用户的全名。
我们可以像使用数据属性一样在template中使用计算属性。
计算属性由vue缓存，因此它只在底层数据属性更改时重新评估逻辑，这意味着如果firstName或lastName没有更改，那么它只返回先前计算的结果，而不再次运行函数。
相关推荐：《javascript教程》
以上就是vue.js计算属性是什么？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
140
