小白学习vue第三天，从入门到精通（computed计算属性）
computed计算属性
<body>
<div id="app">
<div>{{myName}}</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '彭于晏',
lastName: '胡歌'
},
computed: {
myName: {
set: function (newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[1];
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
}
})
</script>
</body>
显示内容为：
计算属性的set方法：
计算属性有的get方法
显示的就是
computed与method的区别
重要的注意点 computed计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。method只要调用了就会执行
总结
vue的computed计算属性 有getter 和 setter 两个方法 但是一般 没有set方法 ，只读属性；还有一个重要的注意点 计算属性有缓存作用，不会反复调用，只有在数据发生变化的时候才会再次调用，比起一般的函数方法，提高了性能优化。
小白学习vue第三天，从入门到精通（computed计算属性）的更多相关文章
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- C#可扩展编程之MEF学习笔记（三）：导出类的方法和属性
前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...
- Vue学习笔记【31】——Vue路由（computed计算属性的使用）
computed计算属性的使用 默认只有getter的计算属性: <div id="app"> <input type="text" ...
- vue computed计算属性 watch监听
计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...
- Vue之computed计算属性
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...
随机推荐
- kubernetes关闭基于角色的访问控制-匿名访问
1.关闭基于角色的访问控制 如果正在使用一个带有RBAC机制的Kubernetes集群,服务账户可能不会被授权访问API服务器(或只有部分授权).目前最简单的方式就是运行下面的命令查询API服务器,从 ...
- Redis的数据类型以及应用场景
1. Redis的作用 1.1 Redis可以做什么 1.缓存:缓存机制几乎在所有的大型网站都有使用,合理地使用缓存不仅可以加快数据的访问速度,而且能够有效地降低后端数据源的压力.Redis提供了键值 ...
- 数学：3D和矩阵
跟紧工作需求学习,于是抽了点时间看了看用于2D3D转换的矩阵内容. 矩阵在3D数学中,可以用来描述两个坐标系间 的关系,通过定义的运算能够把一个坐标系中的向量转换到另一个坐标系中.在线性代数中,矩阵就 ...
- 重新整理 .net core 实践篇————网关中的身份签名认证[三十七]
前言 简单整理一下网关中的jwt,jwt用于授权认证的,其实关于认证授权这块https://www.cnblogs.com/aoximin/p/12268520.html 这个链接的时候就已经写了,当 ...
- 小程序开发 access_token 统一管理
TOKEN 定时刷新器 一.背景 对于使用过公众平台的API功能的开发者来说,access_token绝对不会陌生,它就像一个打开家门的钥匙,只要拿着它,就能使用公众平台绝大部分的API功能.因此,对 ...
- 暑假自学java第九天
1,接口回调是指:可以将接口实现类的对象赋给该接口声明的接口变量,那么该接口变量就可以调用接口实现类对象中的方法.不同的类在使用同一接口时,可能具有不同的功能体现,即接口实现类的方法体不必相同,因此, ...
- java.util.Date 与 java.sql.Date
java.sql.Date 继承 java.util.Date 区别: 1.java.sql.Date 一般用于数据库 2.java.sql.Date 没有时分秒,涉及时分秒的函数都会报异常(且这些方 ...
- ROS2学习之旅（14）——编写简单的发布者和订阅者（C++）
节点是通过ROS Graph进行通信的可执行进程.在本文中,节点将通过话题以字符串消息的形式相互传递信息.这里使用的例子是一个简单的"talker"和"listener& ...
- 题解 SP3591 PATHEADS - Patting Heads
类似桶排 先看有多少头奶牛抽出这个数 再看这个数的奶牛能拍多少人的头(别忘了-1,自己不能拍自己) 最后根据输入输出 110ms #include<bits/stdc++.h> using ...
- 将make的输出（标准输出/标准错误输出）重定向到文件
方式 描述符 含义 stdin 0 标准输入 stdout 1 标准输出 stderr 2 标准错误输出 1.想要把make输出的全部信息,输出到某个文件中 最常见的办法就是:make xxx > ...