计算属性：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. [Spring Data MongoDB]学习笔记－－_id和类型映射

    _id字段的映射: MongoDB要求所有的document都要有一个_id的字段. 如果我们在使用中没有传入_id字段,它会自己创建一个ObjectId. { , "accounts&qu ...

  2. Sleep Buddies

    Sleep Buddies time limit per test 2.0 s memory limit per test 256 MB input standard input output sta ...

  3. SpringMVC 资源国际化实现以及常见问题

    资源国际化可以很方便的实现web项目语言的切换,解决了web项目按需显示不同语言界面的问题. SpringMVC 的资源国际化基于JDK的java.util.ResourceBundle实现,经过Sp ...

  4. 巨蟒python全栈开发linux之cento8

    1.复习路飞部署学习 2.mysql数据库远程访问 3.mysql主从复制 4.redis安全方式启动 5.redis数据类型 6.redis发布订阅 7.redis持久化 8.redis哨兵 9.r ...

  5. Security Report: Stop using relative path to import CSS files

    Detecting and exploiting path-relative stylesheet import (PRSSI) vulnerabilities   Early last year G ...

  6. Python3.6全栈开发实例[019]

    19.干掉主播.现有如下主播收益信息, 按照要求, 完成相应操作:(1)计算主播平均收益值 sum = 0 for i in zhubo.values(): sum +=i print(round(s ...

  7. HDU 3182 Hamburger Magi（状压dp）

    题目链接:pid=3182">http://acm.hdu.edu.cn/showproblem.php?pid=3182 Problem Description In the mys ...

  8. recyclerView布局

    http://blog.csdn.net/lmj623565791/article/details/45059587

  9. 玩转git版本控制软件

    一.git的基本介绍 1.什么是git? git是个开源的分布式版本控制软件,用以有效.高速的处理从很小到非常大的项目版本管理.说白了就是个版本控制软件 2.git的使用方法 git软件是通过命令来实 ...

  10. 指定Python线程数目

    可以通过threading.semaphore()来指定并行运行的Python线程的数目. #!/usr/bin/python2.7 #File: threadsNum.py #Author: lxw ...