vue中computed的用法
computed 的英文意思是计算,那么顾名思义,vue中的computed也与计算有关,他是专门用来处理复杂表达式的,在vue中,不建议在模板语法中写复杂的表达式,如:x+y+(z-1) 这种,所以vue建了一个computed用来处理这类表达式,使用方法其实也不难,在computed里面建一个函数并写表达式,然后在想要引用的地方将之当成data里的值引用即可,例如想要在模板语法里面用,只需要写函数名即可,并且不用加括号,具体例子如下:
data中定义三个值:
data(){ return{ num1: 10, num2: 20, nums: 5 } },
然后在computed中写一条表达式:
computed:{ //计算函数,复杂的计算都应该放在这里,尽量不要直接在模板语法里面计算,在此处计算的值是会动态变的,即计算的数中有一个值变了,最终结果也会跟着变,类似于封装的计算函数 addNum:function(){ //addnum可以直接在模板语法里面用,相当于data内的值 return Number(this.nums) + Number(this.num1) + Number(this.num2); } },
之后在模板语法中应用
<div>{{addNum}}</div> //addNum即为定义的表达式
看下效果:
可以看到按钮中显示出了表达式的值
如果表达式内参数的值变化的话最终的值也是会跟着变的
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~