计算属性：Vue.js 模板内的表达式非常便利，但是缺点就是只能用于简单的运算，如果模板中有太多的逻辑运算会让模板不堪重负且难以维护。恰恰计算属性可以处理复杂的逻辑运算，也就是说对于任何复杂逻辑你都应当使用计算属性。

1、计算属性基础列子

 <!DOCTYPE html>

 <html>

 <head lang="en">

         <meta charset="UTF-8">

          <title></title>

          <script type="text/javascript"  src="vue.js"></script>

      </head>

  <body>

      <div id="id">

          <span>{{message}}</span><br>

          <span>{{reverseMessage}}</span><br>

          <span>{{num}}</span><br>

          <span>{{sum}}</span>

      </div>

  </body>

  <script>

        var vm = new Vue({

            el: '#id',

            data:{

                message:'计算属性',

                num:100

            },

            computed:{

                reverseMessage: function () {

                    return this.message.split('').reverse().join('')

                },

                sum:function(){

                    return this.num + 100

                    //return this.num = this,num+100    //绑定数据num同时也更新了

                }

            }

        })

      </script>

  </html>

输出结果：

2、计算属性和Methods的比较

　　Methods也是实现计算属性相同的功能
　　计算属性是基于它们的依赖进行缓存的，也就是说计算属性只有在它相关依赖发生改变时才会重新求值，只要绑定数据没有发生改变，多次访问计算属性会立即返回之前的计算结果，而不必执行函数。
　　Methods只要发生重新渲染，methods就总会执行回调函数。相比而言如果遇到需要很大的开销逻辑运算时，使用计算属性比methods更有优势。因为计算属性具有缓存的功能，可以大大提高效率。

vue.js计算属性 vs methods的更多相关文章

  1. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  2. Vue.js 计算属性

    Vue.js 计算属性 使用计算属性的实例: <!DOCTYPE html> <html> <head> <meta cahrset="utf-8& ...

  3. Vue.js 计算属性是什么

    Vue.js 计算属性是什么 一.总结 一句话总结: 模板 表达式 维护 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...

  4. Vue.js 计算属性computed和methods的区别

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 如下: 两种方式在这种情况下的结果是一样的 写法上的区别是computed计算属性的方式在用属性时不用加(),而met ...

  5. Vue.js 计算属性的秘密

    计算属性是一个很邪门的东西,只要在它的函数里引用了 data 中的某个属性,当这个属性发生变化时,函数仿佛可以嗅探到这个变化,并自动重新执行. 上述代码会源源不断的打印出 b 的值.如果希望 a 依赖 ...

  6. vue.js初探：计算属性和methods

    在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...

  7. 浅谈Vue中计算属性（computed）和方法（methods）的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  8. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  9. 一起学Vue之计算属性和侦听器

    概述 在Vue开发中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.当你想要在模板中多次引用相同表达式时,就会更加难以处理.所以,对于任何复 ...

随机推荐

  1. LIS(模板)

    记录一下,O(nlgn)的算法求LIS //HHH #include <iostream> #include <stdio.h> #include <string.h&g ...

  2. 05、(通过nat123软件) 实现用自己电脑搭建一个网站

    (通过nat123软件) 实现用自己电脑搭建一个网站 准备: Tomcat:这个是web容器,其实有了这个就已经让电脑成为服务器了,在自己电脑上可以通过 localhost:8080/xxx 来访问自 ...

  3. 普通摄像机也能做互联网HLS(m3u8)、RTMP、HTTP-FLV直播？是的，采用基于GBT28181协议的EasyGBS流媒体服务

    在之前的一篇博客<EasyNVR和EasyDSS云平台联手都不能解决的事情,只有国标GB28181能解决了>我们介绍了很多应用场景里面,RTSP和RTMP直播协议都无法满足应用需求时,国标 ...

  4. Sql注入基础一

    凡是带入数据库查询的都有可能是注入.     整个数据包 Sql注入原理? 网站数据传输中,接受变量传递的值未进行过滤,导致直接带入数据库查询执行的操作问题. Sql注入对于渗透的作用? 获取数据(网 ...

  5. JavaScript方法splice()和slice()

    1 splice() 1.1 说明 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目.该方法会改变原始数组.Link 1.2 语法 arrayObject.splice(inde ...

  6. 【转】图解MySql命令行创建存储过程

    一 操作实例 首先登录mysql: 使用source命令,从命令行执行sql脚本,创建表: 创建第一个存储过程: 事先用DELIMITER关键字申明当前段分隔符,这样MySQL才会将";&q ...

  7. 【转】虚拟 IO 服务器（VIOS）和 IBM i

    Power 主机上的虚拟化应用,简单阐述虚拟 IO 服务器的功能,用途,优点,以及虚拟 IO 服务器在高级虚拟化技术的作用.举例说明虚拟 IO 服务器与 IBM i 分区直接互联特性. 引言 随着信息 ...

  8. 请听一个故事------>你真的认为iPhone只是一部手机？苹果惊天秘密!!

    在网上看到的一篇小说,感觉有点意思,转载过来大家一起围观下,作者很幽默很风趣. 导读:iPhone的隐藏功能!Jobs的军方身份!图灵服毒自杀的传奇故事!中兴华为的神秘背景! 你真的认为iPhone只 ...

  9. matlab学习笔记之求解线性规划问题和二次型问题

    一.线性规划问题 已知目标函数和约束条件均为线性函数,求目标函数的最小值(最优值)问题. 1.求解方式:用linprog函数求解 2.linprog函数使用形式: x=linprog(f,A,b)  ...

  10. Linux中的特殊字符

    单引号: 在单引号中所有的特殊字符都没有特殊含义 双引号: 在双引号中 $ ` \ 三个字符表示,调用变量的值.引用命令.转义,其他特殊字符均没有特殊含义 反引号: 用反引号括起来的内容被当作系统命令 ...