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计算属性）的更多相关文章

  1. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  2. 43.VUE学习之--组件之使用.sync修饰符与computed计算属性超简单的实现美团购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  4. vue从入门到进阶：计算属性computed与侦听器watch（三）

    计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...

  5. C#可扩展编程之MEF学习笔记（三）：导出类的方法和属性

    前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

  6. Vue学习笔记【31】——Vue路由（computed计算属性的使用）

    computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" ...

  7. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  8. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  9. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

随机推荐

  1. 五、JavaSE语言基础之流程控制

    流程控制的简单概念 流程控制:指通过关键字控制代码的执行流程; 一.顺序结构:执行顺序从左到右从上到下; 顺序结构无关键字,一般而言大多数代码都是顺序结构; 二.选择结构:根据条件判断是否执行 选择结 ...

  2. Windows10上开启WSL2(Windows Subsystem for Linux 2)及Docker Desktop For Windows

    什么是WSL2 WSL2(Windows Subsystem for Linux 2)是适用于Linux的Windows子系统体系结构的一个新版本,它支持适用于Linux的Windows子系统在Win ...

  3. .Net RabbitMQ实战指南——服务日志

    RabbitMQ的日出输入方式有很多种:file.console .syslog .exchange. 在RabbitMQ中,日志级别有none(0).critical(4).error(8).war ...

  4. 2、mysql编译安装

    2.1前言: 此文档介绍的是cmake编译安装的方式: 二进制的安装方式在linux运维_集群_01中有详细的安装说明(已经编译完成,进行初始操作即可) 初始化操作时需要对编译好的mysql进行一下备 ...

  5. [小技巧] google map使用

    在网页中打开 google map 中,可以使用 shift + - 来缩小地图,shift + + 来放大地图.

  6. IDA 动态调试

    感谢南邮,让我把ida动态调试,给搞定了,困扰了很久,之前下的ubuntu的源,好像有问题,ifconfig这个命令一直装不上,突然想起来了我的服务器很久没用了,重装了下系统,换成ubuntu,这里记 ...

  7. Java | Map集合

    Map集合 在现实生活中,有非常多的东西,是和另外一种东西对应的,并且还是唯一的,比如:身份证号与个人,个人与手机,一夫一妻...等,这种关系就是对应关系,又叫做映射.Java为这种数据类型提供了专门 ...

  8. Codeforces Round#704 Div2 题解(A,B,C,D,E)

    FST ROUND !!1 A Three swimmers: 直接整除一下向上取整就好了: #include <bits/stdc++.h> using namespace std; t ...

  9. Django基础-02篇 Models的属性与字段

    1.models字段类型 AutoField():一个IntegerField,根据可用ID自动递增.如果没指定主键,就创建它自动设置为主键. IntegerField():一个整数: FloatFi ...

  10. C语言：2.1

    int main() { char zi='A'; short bla=10; int blb=20; long blc=30; float bld=340.56; double ble=34.324 ...