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计算景观指数AI

    可使用工具包 pylandstats 此工具包基本是根据fragstats形成的,大部分fragstats里面的景观指数,这里都可以计算.但是,还是有一小部分指数这里没有涉及. LS_METRICS ...

  2. ubuntu 18.4LTS 安装12.1.6赛门铁克防病毒系统

    创建/tools/ 文件夹,并将需要的软件包上传到该目录下 # mkdir -p /tools/ && cd /tools/ # tar -xzvf chang.tar.gz # cd ...

  3. 《手把手教你》系列技巧篇（七）-java+ selenium自动化测试-宏哥带你全方位吊打Chrome启动过程（详细教程）

    1.简介 经过前边几篇文章和宏哥一起的学习,想必你已经知道了如何去查看Selenium相关接口或者方法.一般来说我们绝大多数看到的是已经封装好的接口,在查看接口源码的时候,你可以看到这个接口上边的注释 ...

  4. JUnit5的Tag、Filter、Order、Lifecycle

    Tag JUnit5可以使用@Tag注解给测试类和测试方法打tag,这些tag能用来在执行时进行过滤,它跟group有点类似. tag应该遵循以下规则: 不能为null或者为空. 不能包含空格. 不能 ...

  5. CentOS-Docker安装MongoDB(单点)

    下载镜像 $ docker pull mongo 创建相关目录 $ mkdir -p /usr/mongo/data /usr/mongo/dump 运行镜像 $ docker run --resta ...

  6. WebService：WebService+Springboot常用注解

    首先推荐webservice文章不错的博主:https://www.iteye.com/blog/yufenfei-1685249 这位博主主要讲了WebService的CXF的jar包运用,很实用 ...

  7. Spring中的<context:annotation-config/>配置

    当我们需要使用BeanPostProcessor时,直接在Spring配置文件中定义这些Bean显得比较笨拙,例如: 使用@Autowired注解,必须事先在Spring容器中声明AutowiredA ...

  8. SpringMVC（6）数据验证

    在系列SpringMVC(4)数据绑定-1.SpringMVC(5)数据绑定-2中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 -> 数据验证. ...

  9. linux cut的用法

    p.p1 { margin: 0; font: 12px ".PingFang SC Semibold"; color: rgba(53, 53, 53, 1) } p.p2 { ...

  10. vsftpd配置文件详解（转）

      vsftpd配置文件详解     1.默认配置: 1>允许匿名用户和本地用户登陆.      anonymous_enable=YES      local_enable=YES 2> ...