计算属性：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. coursera 《现代操作系统》 -- 第八周 存储模型（2）

    名词解释 页面: 页面大小: 页表: 页表项: 以上名词解释见: coursera <现代操作系统> -- 第七周 存储模型(1) 页表项大小: 问:以上是怎么计算出来的? 32位指什么? ...

  2. <2013 08 13> TeX and LaTeX, some introduction

    1.  TeX是Donald E. Knuth教授的精心杰作,它是个功能非常强大的幕后排版系统,含有弹性很大,而且很低阶的排版语言.含有九百多条指令,用Pascal语言(的一个子集)写成. 2.  T ...

  3. vs编译程序不能实现，“未能完成操作 未指定的错误”的解决办法

    1.先把.vcproj 文件剪切到其他地方 2.打开.sln,报错->点“确定”->再点“确定” 3.把 .vcproj 文件 放回来,在vs2005右边的“解决方案”处右键 重新加载,就 ...

  4. VSpy之C Code Interface的使用

    Spy3 要运行 CCodeInterface 功能,需要安装运行环境,建议安装 Visual Studio2003,2005,2008,2010 或更新的版本.当然也可以安装 VC express ...

  5. C 和 C++ 的标准库分别有自己的 locale 操作方法，C 标准库的 locale 设定函数是 setlocale()，而 C++ 标准库有 locale 类和流对象的 imbue() 方法（gcc使用zh_CN.GBK，或者zh_CN.UTF-8，VC++使用Chinese_People's Republic of China.936或者65001.）

    转自:http://zyxhome.org/wp/cc-prog-lang/c-stdlib-setlocale-usage-note/ [在此向原文作者说声谢谢!若有读者看到文章转载时请写该转载地址 ...

  6. Python：itertools模块（转）

    原文:http://www.cnblogs.com/cython/articles/2169009.html itertools模块包含很多创建迭代器的函数,可以用各种方式对数据进行循环操作,此模块中 ...

  7. python函数回顾：dir()

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

  8. Linux中的欢迎信息

    本地终端欢迎信息 /etc/issue \d     显示当前系统日期 \s     显示操作系统名称 \l      显示终端的终端号,这个比较常用 \m    显示硬件体系结构,如i386.i68 ...

  9. python 文件格式为 txt 转换成 csv 格式

    1  txt 文件的读取 open(file, mode='r', buffering=-1, encoding=None, errors=None, newline=None, closefd=Tr ...

  10. [转]c#中从string数组转换到int数组

    string[] input = { "1", "2", "3", "4", "5", " ...