仿京东网站后台,域名制作网站吗,自己建网站需要什么软件,wordpress 多站点配置文件总览
1.简介计算属性 2.computed 与 methods 的区别 3.computed 的简写#xff08;不修改计算属性#xff0c;只显示#xff09; 4.经典应用场景
一、计算属性
1.为什么需要计算属性#xff1f;
首先#xff0c;如果我们要写一个插值语法#xff0c;而 {{ }} 内的内容…总览
1.简介计算属性 2.computed 与 methods 的区别 3.computed 的简写不修改计算属性只显示 4.经典应用场景
一、计算属性
1.为什么需要计算属性
首先如果我们要写一个插值语法而 {{ }} 内的内容是一个经过计算的值那么按照原本 JS 的写法应该是这样的 但是在 VUE 中不推荐这么写。这样看起来很乱。所以我们可以使用 methods 或者 computed 来实现以降低耦合性 2.具体案例
计算属性被称为“属性”但它不被放在 data 中而是有专门的地方存放computed: {}。
有一个比较难以理解的点。一个计算属性并没有死数据它只是一个容器用于存放经过计算后的值。
我们能够理解如果我们更改了计算属性比如上面的 fullName依赖的属性比如上面的 firstName 和 LastName那么计算属性自己也会发生改变使用 get(){}这件事。
那如果我们直接修改计算属性呢我们要如何让这种更改下发到计算属性依赖的基本属性上去答案是使用 set(value){}。 如果我们直接更改 fullName就会让这种变化 按照我们制定的规律下发到 组成 fullName 的基础属性上去。 二、computed 与 methods 的区别
1.效率方面
computed 内置了 缓存机制让重复的值不会被重复计算只被计算一次就能够反复不经过再次计算直接调用。
2.调试方便
2.1 写在 method 中时我们无法直接查看这个计算后的值是什么 2.2 写在 computed 中时我们能够直接在调试器上看到它 三、computed 的简写不修改计算属性只显示
1.简写示例 2.调用方式
我们直接使用即可{{ fullName }} 而不需要再像使用 method 时那样写成函数的形式如 {{ fullName() }} 四、computed 应用案例1值的映射
1.通过后端布尔值前端匹配不同的值不再需要将“是”、“否”这些中文放进数据库了
在下面这个案例中我们直接通过根据依赖 data 中布尔类型变量 isHot 的计算属性 info将 data 中 isHot 的 “true” 和 “false” 映射为 computed 中 info 的 “凉爽” 和 “炎热”
