vue的计算属性get和set
1.计算属性是用来存储数据,但具有以下几个特点:
a.数据可以进行逻辑处理操作。
b.对计算属性中的数据进行监视。
2.计算属性和普通属性的区别:
a.计算属性是基于它的依赖进行更新的,只有在相关依赖发生改变时才能更新变化
b.计算属性是缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存计算的结果,不会多次执行。
3.get和set
计算属性由两部分组成,get和set,分别用来获取计算属性和设置计算属性。
默认只有get,如果需要set,要自己添加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script type= "text/javascript" > window.onload= function (){ let vm = new Vue({ el: "#app" , data:{ num:8 }, computed:{ num1:{ get: function (){ //必须有返回值,用来获取属性,称为get函数 return this .num-1; }, set: function (val){ console.log( '修改num1的值' ); this .num = 11; } } }, methods:{ changeNum1: function (){ this .num1 = 11; } } }) } </script> |
html:
1 2 3 4 5 | <div id= "app" > <p>{{ num }}</p> <p>{{ num1 }}</p> <button @click= 'changeNum1' >点击改变num1的值</button> </div> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端
· AI Agent开发,如何调用三方的API Function,是通过提示词来发起调用的吗