什么是计算属性(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中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
- 上一篇:常用的前端开发设计模式有哪些
- 下一篇:vue3.0什么时候发布的
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论