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. 16、linux下卸载oracle11gR2

    提示:如果要再次安装, 最好先做一些备份工作,包括用户的登录脚本,数据库自动启动关闭的 脚本,和Listener自动启动的脚本,要是有可能连创建数据库的脚本也保存下来: 16.1.通过oracle自带 ...

  2. 在Docker运行的Nignx内部署前后端分离项目

    环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...

  3. keycloak~自定义rest接口

    rest资源 对于我们集成keycloak来说,你可能会遇到它没有实现的功能,这时需要对kc进行扩展,资源的扩展是其中一个方面,它需要实现RealmResourceProvider和RealmReso ...

  4. Linux：VMware配置NAT网络IP

    设置虚拟机网络配置 在目标虚拟机下右键, 选择"设置", 打开"虚拟机设置"对话框, 再选择"网络适配器"使用NAT模式的, 如下图所示: ...

  5. Java：Java控制台输出保存进文件

    前言 实现在控制台输出.并且把输出保存进文件 实现 您要在两个流中写入数据,请尝试使用OutputStream中的TeeOutputStream对象. 一.在maven的pom文件中引入jar包. & ...

  6. Spring Boot和Feign中使用Java 8时间日期API（LocalDate等）的序列化问题

    LocalDate.LocalTime.LocalDateTime是Java 8开始提供的时间日期API,主要用来优化Java 8以前对于时间日期的处理操作.然而,我们在使用Spring Boot或使 ...

  7. BUU mrctf shit

    吐槽:去年没写出的题,现在终于可以上手了,昂哥nb 动调发现直接卡着不动了,怀疑是反调试,果然有好几处反调试 这里选择就不先nop了,先让程序跑起来,然后attach,在输入函数下面下个断点,atta ...

  8. python内置函数dir()

    描述 dir() 函数不带参数时,返回当前范围内的变量.方法和定义的类型列表:带参数时,返回参数的属性.方法列表.如果参数包含方法__dir__(),该方法将被调用.如果参数不包含__dir__(), ...

  9. oracle 密码详解以及破解

    参考的相关资料等: https://docs.oracle.com/en/database/oracle/oracle-database/18/spmsu/finding-and-resetting- ...

  10. PHP的图片转base64，base64图片转换为图片并保存代码

    打卡记录 1. 图片转base64代码 /*图片转换为 base64格式编码*/ $img = 'images/avatar.jpg'; $base64_img = base64EncodeImage ...