小白学习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> ...
随机推荐
- js笔记14
1.作用域面试题 画图分析 2.DOM document object model 节点树状图 document>documentElement>body>tagname 3.我们常 ...
- Vue实现点击复制文本内容(原生JS实现)
需求: 实现点击订单编号复制内容 实现步骤: 这里我是在element 的table组件里实现的步骤,仅供参考,实际上实现思路都大同小异 首先在需要点击的地方,添加点击事件 <div class ...
- Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据
本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...
- 2、centos6和centos7的区别
services使用了systemd来代替sysvinit管理. systemd是Linux下的一种init软件,由Lennart Poettering带头开发,并在LGPL 2.1及其后续版本许可证 ...
- Java数据库开发(三)之——补充
一.SQL注入与防范 使用PreparedStatement替代Statement对象,它提供了参数化SQL的方式 二.事务 定义 事务是并发控制的基本单位,满足ACID特征 原子性:atomicit ...
- SonarQube 概述与安装
SonarQube 概述 是一种自动代码审查工具,用于检测代码中的错误.漏洞和代码异味.它可以与您现有的工作流程集成,以支持跨项目分支和拉取请求的持续代码检查. 在一个典型的开发过程中 开发人员在 I ...
- 全局获取HttpContext
全局获取HttpContext 在我们平常开发中会有这样的需求,我们的Service业务层需要获取请求上下文中的用户信息,一般我们从控制器参数传递过来.如果你觉得这样就可以了,请您关闭文章. 场景 但 ...
- 数据源连接数据库配置相关xml文件
学完数据源连接数据后,做个笔记,当我们的程序对数据库访问频繁时,为了提高程序运行效率,我们可以通过 数据源连接数据库,从数据库连接池中直接取得出于空闲状态的数据库连接对象,以下是相关xml文件的配置: ...
- Java实验项目三——面向对象定义职工类和日期类
Program:按照如下要求设计类: (1)设计一个日期类,用于记录年.月.日,并提供对日期处理的常用方法. (2)设计一个职工类,该职工类至少具有下面的属性:职工号,姓名,性别,生日,工作部门,参加 ...
- nmon打开nmon文件出现 运行时错误13类型不匹配问题解决
根据nmon工具安装及nmon analyser的使用 - 空谷幽兰LDD - 博客园 (cnblogs.com)文中,用nmon_analyse去打开监控到的nmon文件,出几个报错. 1 用WPS ...