<!DOCTYPE html>

<html>

<head>

    <script src="https://unpkg.com/vue@2.4.2"></script>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <div id="app-6">

        <p v-once v-if="see">{{ message }}</p>

        <p   v-if="see">{{ reversedMessage  }}</p>

        <p v-if="see">{{ reversedMessages()  }}</p>

        <input  v-model="message">

        <ol>

            <todo-item

                       v-for="item in groceryList"

                       v-bind:todo="item"

                       v-bind:key="item.id"

                       ></todo-item>

        </ol>

    </div>

</body>

</html>

<script>

    var app6;

    window.onload = function () {

        Vue.component('todo-item', {

            template: '<li>{{todo.text}}</li>',

            props:['todo']

        })

        app6 = new Vue({

            el: '#app-6',

            data: {

                see: true,

                groceryList: [

                    { id: 0, text: '蔬菜' },

                    { id: 1, text: '奶酪' },

                    { id: 2, text: '随便其他什么人吃的东西' }

                ],

                message: 'Hello Vue!'

            },
//计算属性

            computed: {

                reversedMessage: function () {

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

                }

            },
//方法返回

            methods: {

                reversedMessages: function () {

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

                }

            }

        })

    }

</script>

　　注意 由于计算属性与method 与data中的属性都是保存在app6这个对象的一级属性里面 所以如果重名 后定义的将会覆盖前定义的对象

官方文档解释两者的差别

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
now: function () {
return Date.now()
}
}

相比而言，只要发生重新渲染，method 调用总会执行该函数。

文档地址 https://cn.vuejs.org/v2/guide/computed.html

vue.js使用之计算属性与方法返回的差别的更多相关文章

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

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

  2. Vue.js系列之四计算属性和观察者

    一.计算属性 1.模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的.在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id="example&quo ...

  3. Vue.js学习 Item5 -- 计算属性computed与$watch

    在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...

  4. Vue生命周期，计算属性、方法、侦听器

    vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...

  5. Vue基础练习之计算属性、方法、监听器

    <body> <div id="root"> {{fullName()}} {{age}} </div> <script> var ...

  6. vue的计算属性与方法的不同

    计算属性 vue的模板里可以使用表达式,但是它的设计初衷是用于简单计算,在模板中放入太多逻辑会让模板过重且难以维护.例如: <div id="example"> {{ ...

  7. Vue 计算属性与方法

    computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...

  8. vue计算属性和方法的区别

    计算属性: <div id="example"> <p>{{ now }}"</p> </div> <script& ...

  9. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

随机推荐

  1. 【最大流】BZOJ1305-[CQOI2009]dance跳舞

    [题目大意] 一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢 ...

  2. Java编程思想学习(一)----对象导论中多态的理解

    1.1抽象过程 1)万物皆对象. 2)程序是对象的集合,他们通过发送消息来告知彼此所要求做的. 3)每个对象都有自己的由其他对象所构成的存储. 4)每个对象都拥有其类型. 5)某一特定类型的所有对象都 ...

  3. PHP数组和数据结构（上）

    1.数组的声明 两种方法: 直接给数组元素赋值 使用array()函数声明 说明: (1)索引数组的下标可以是非连续的值,只要在初始化时指定非连续的下标值即可 如果指定的下标值已经声明过,则属于对变量 ...

  4. [转] Log4j 配置 的webAppRootKey参数问题

    在tomcat下部署两个或多个项目时,web.xml文件中最好定义webAppRootKey参数,如果不定义,将会缺省为“webapp.root”,如下:<!-- 应用路径 --> < ...

  5. Ubantu Mark

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  6. 大于非负整数N的第一个回文数 Symmetric Number

    1.题目 如标题,求大于整数N(N>=0)的第一个回文数的字符串表示形式. 2.样例 1  --> 2 9  -->11 12345 -->12421 123456 --> ...

  7. winform WebBrowser如何修改使用默认的IE浏览器版本

    在搜了一些相关资料原来WebBrowser使用的是IE的兼容模式进行浏览(IE7模式). 建议:先添加注册表中,然后使用注册表编辑器导出功能,产生reg注册文件:方便日后使用. Winform  We ...

  8. 面试DB优化

    高频全表扫描 0.5 表大小超过200M,且SQL高频执行(15分钟内超过500次),PIR 3级,表大小超过高速缓存的1.5%,报PIR 2级. 禁止使用select * 0.5 禁止使用selec ...

  9. redis节点管理-新增主节点

    原文:http://blog.sina.com.cn/s/blog_53b45c4d0102wg11.html 集群节点添加 节点新增包括新增主节点.从节点两种情况.以下分别做一下测试: 1.新增主节 ...

  10. 如何使用SQLMAP绕过WAF

    WAF(web应用防火墙)逐渐成为安全解决方案的标配之一.正因为有了它,许多公司甚至已经不在意web应用的漏洞.遗憾的是,并不是所有的waf都是不可绕过的!本文将向大家讲述,如何使用注入神器SQLMa ...