Vue 计算属性 computed
2023-09-27 14:26:05 时间
Vue
-
-
计算属性是基于它们的响应式依赖进行缓存的
-
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
在插值表达式中使用js表达式是非常方便的,而且也经常被用到。
但是如果表达式的内容很长,就会显得不够优雅,而且后期维护起来也不方便,例如下面的场景,我们有一个日期的数据,但是是毫秒值:
data:{ birthday:1529032123201 // 毫秒值 }
我们在页面渲染,希望得到yyyy-MM-dd的样式:
<h1>您的生日是:{{ new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay() }} </h1>
Vue中提供了计算属性,来替代复杂的表达式:
var vm = new Vue({ el:"#app", data:{ birthday:1429032123201 // 毫秒值 }, computed:{ birth(){// 计算属性本质是一个方法,但是必须返回结果 const d = new Date(this.birthday); return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay(); } } })
页面使用:
<div id="app"> <h1>您的生日是:{{birth}} </h1> </div>
相关文章
- 你知道,什么时候用Vue计算属性吗?
- 【Vue 快速入门系列】todoList案例小总结
- 【Vue 快速入门系列】姓名案例几种实现方法(插值语法、函数语法、计算属性的使用、计算属性原理剖析)
- vue过滤器
- Vue 计算属性
- Vue.js:使用v-model双向绑定数据案例
- Vue学习笔记之使用computed计算属性
- Vue组件:网格系统,row & col
- vue利用计算属性做(展开收起)小例子
- Vue技术8.3姓名案例_计算属性实现
- vue计算属性computed(以及和methods的对比)
- elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
- Vue 过滤器、计算属性、侦听器 图解版 一目了然
- vue基础(中篇)
- Webpack4 实战 React 和 Vue 项目