先上代码,先上代码:本例中的getStartTime依赖于data中的start_time
<p>本次活动截至到 <strong>2021年{{getStartTime[0]}}月{{getStartTime[1]}}日</strong></p>
getStartTime:function(){
this.startMonth = new Date(this.start_time).getMonth()+1;
this.startDay = new Date(this.start_time).getDate();
return [this.startMonth,this.startDay];
},
前言
随着Vue框架的兴起,有关这门技术的相关概念也越来越重要,很多人都开启了vue框架的使用学习,但是受制于经验,很多人刚开始可能不会使用vue框架中的一些概念和方法,
因此本文就介绍了有关vue中计算属性的基础内容,希望对大家有帮助。
一、计算属性是什么?
老生常谈的话题。首先既然叫属性,肯定它的使用方式和js中常见的属性有相似之处,字面意思理解,计算属性就是通过一套逻辑计算得到结果。
我们看下官方文档:好吧,官方也没给定义,就是几个简单的例子供大家理解
二、使用步骤
1.建立属性依赖
通过文章开头的(示例):
我们大致可以知道,使用计算属性,先要建立属性依赖,就像例子中的一样,getStartTime的值最终取决于start_time和中间的计算逻辑;
start_time ==> 计算逻辑 ==》getStartTime
大致可以明白,计算逻辑搭建起了原属性和getStartTime之间的沟通桥梁,也即属性依赖。
源属性和计算逻辑决定着计算属性最终的结果。
2.计算数据
通过开头的(示例):
计算数据需要在computed:{}块中实现,实现方式需要先定义计算属性,后接函数,用来封装计算逻辑,也即建立依赖的过程
- 定义计算属性
- 后接函数,封装计算逻辑
3.DOM中引用计算属性
就像开头(示例)所描述的那样使用,如果还不理解,就记着他的字面意思,计算属性计算属性,就得和vue中属性(property)的使用方式一样才行
<p>
{{getStartTime}}
</p>
总结
vue中计算属性的使用方式很简单,关键要理解才能快速的应用到日常的开发中去。