<!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. 【回文自动机】bzoj3676 [Apio2014]回文串

    回文自动机讲解!http://blog.csdn.net/u013368721/article/details/42100363 pam上每个点代表本质不同的回文子串.len(i)代表长度,cnt(i ...

  2. codevs 2185 最长公共上升子序列--nm的一维求法

    2185 最长公共上升子序列  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond 题目描述 Description 熊大妈的奶牛在小沐沐的熏陶下开始研究信息题目 ...

  3. [转]详细解析Java中抽象类和接口的区别

    在Java语言中, abstract class 和interface 是支持抽象类定义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和int ...

  4. IOS集成到支付宝的步骤及问题

    一,在支付宝开放平台下载支付宝SDK(https://openhome.alipay.com/platform/document.htm#down) 二,添加sdk文件到xcode 1,新建一个ali ...

  5. Microsoft SQL Server 2012 Internals

    http://blog.csdn.net/column/details/learnsqlserver2012.html

  6. JavaScript基础入门教程（四）

    说明 前面三篇博客介绍了js中基本的知识点,包括变量类型及其转换.表达式.运算符等小知识点,这篇博客主要讲的是对象.如果你学过java等语言,你也许在下文的阅读中发现在js中的对象与java中的对象存 ...

  7. 发一个比trace功能更强大debug工具，MonterDebugger

    经常看到兄弟说trace不出东西啊,这样给你调试会带来很多不便:加入说我们需要将运行时的debug信息和之前某个版本的进行比对:又加入说我们需要在运行时通过debug动态调整显示对象的属性:查看当前整 ...

  8. Shell合并两个文件成一个文件的两列paste,awk

    Shell合并两个文件成一个文件的两列 发布时间:2014-07-20   编辑:www.jquerycn.cn Shell合并两个文件成一个文件的两列,提供了两种方法,普通shell脚本,awk脚本 ...

  9. 如何编写一个shellcode

    ShellCode的编写就是将函数或变量在内存中的间接地址改为函数或变量在内存中的直接地址,直接调用! 以MessageBox函数为例进行讲解如下 新建shellcode.cpp: 编写代码如下: 运 ...

  10. IP地址转换、主机大小端、htonl、ntohl实现

    copy   #include <IOSTREAM> //#include <WINSOCK.H> using std; typedef  uint16; unsigned   ...