Vue 计算属性
2022/1/29 6:06:22
本文主要是介绍Vue 计算属性,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Vue 计算属性
定义:根据data中的已有属性计算得到一个新的属性
原理:根据defineProperty方法提供的getter和setter
优点: 对比methods, 优点在于有缓存,可以复用。
特点:
计算属性中的get函数调用时机:
- 初次读取改属性
- 该属性的依赖属性变化时
vm中有data、computed中的属性
vm._data只有data中的数据,没有computed中的数据
computed中的数据是把data中的数据经过计算设置到vm对象中去的
set函数不能直接修改计算属性,只能通过修改依赖属性的方式来进行
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="../lib/vue.js"></script> <body> <div id="root"> <input type="text" v-model="firstName"> <br> <input type="text" v-model="lastName"> <br> <span>{{fullName}}</span> </div> <script> const vm = new Vue({ el:"#root", data:{ firstName:'island', lastName:'l' }, computed:{ // fullName:{ // get(){ // return this.firstName + '-' + this.lastName // } // } // 简写形式,直接写函数,当做get用 fullName:function(){ return this.firstName + '-' + this.lastName } } }) </script> </body> </html>
这篇关于Vue 计算属性的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist