computed计算属性和data_Vue项目中如何使用computed计算属性

文章目录

computed:

1、基本使用：

1.1 应用场景：

1.2 代码位置：

1.3 值：

2、复杂操作-结合data中数据：

3、计算属性写法演变：

3.1 计算属性的setter和getter：

① 完整的计算属性写法：属性+方法

② 计算属性一般只有get方法，是只读属性。所以一般写法为：

③ 语法糖---简化写法：

4、项目中实例：

computed:

1、基本使用：

在computed中定义一个函数(看起来是一个函数，其实是一个属性)，命名按照属性规范命名(一般为名词)。

1.1 应用场景：

当数据A的逻辑很复杂时，把A这个数据写在计算属性中。

1.2 代码位置：

通过选项computed：{计算属性a:值}

1.3 值：

带有返回值return的函数。

计算属性a和data中的数据用法一样。计算属性在computed中进行定义，无需再在data中定义，在template中直接可进行使用，使用方式与data中定义的数据一样。

{ {msg}}

---

{ {str}}

var vm = new Vue({

el: '#app',

data: {<