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. 用python+pyqt5语言编写的扫雷小游戏软件

    github源码地址:https://github.com/richenyunqi/Mine-game ,撒娇打滚求star哦~~ღ( ´･ᴗ･` )比心 扫雷主界面模块 整个扫雷界面使用大量的白色方 ...

  2. flyway实现java 自动升级SQL脚本

    flyway实现java 自动升级SQL脚本 为什么要用Flyway 在日常开发中,我们经常会遇到下面的问题: 自己写的SQL忘了在所有环境执行: 别人写的SQL我们不能确定是否都在所有环境执行过了: ...

  3. 基于Yarp实现内网http穿透

    Yarp介绍 YARP是微软开源的用来代理服务器的反向代理组件,可实现的功能类似于nginx. 基于YARP,开发者可以非常快速的开发一个性能不错的小nginx,用于代理http(s)请求到上游的ht ...

  4. nexus AD 集成配置

    nexus AD 集成配置 管理用户登录 点击设置图标-->LDAP-->Create connection 进入AD 集成配置页面 Connection配置 User and group ...

  5. Centos下安装最新版本Git

    git是一个分布式版本控制系统 我们在Centos上安装GIT有好几种方式.这里我们用最简单的yum命令方式 一步到位,省了下载编译安装这些繁琐过程. 输入命令: yum install -y git ...

  6. 解决pip安装时出现报错TypeError unsupported operand type(s) for -= 'Retry' and 'int'

    1.参考 https://stackoverflow.com/questions/42610545/typeerror-unsupported-operand-types-for-retry-and- ...

  7. leetcode147对链表进行插入排序

    题目: 对链表进行插入排序. 插入排序算法: 插入排序是迭代的,每次只移动一个元素,直到所有元素可以形成一个有序的输出列表. 每次迭代中,插入排序只从输入数据中移除一个待排序的元素,找到它在序列中适当 ...

  8. Spring学习总结(一)---谈谈对Spring IOC的理解(一:理论知识理解)

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

  9. FreeRTOS基本概念

    1.在FreeRTOS中,使用的数据类型虽然都是标准C里面的数据类型,但是针对不同的处理器,对标准C的数据类型又进行了重新定义. 2.链表由节点组成,节点与节点之间首尾相连,节点包含用于指向后一个节点 ...

  10. OSSBrowser windows使用

    目录 1. 安装 2. 启动OSSBrowser并登录 1. 安装 下载地址:github或官方 2. 启动OSSBrowser并登录 ossbrowser安装包下载到本地解压之后,点击oss-bro ...