<!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. 20162303 实验一 Java开发环境的熟悉(Linux + Eclipse)

    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 石亚鑫 学号:20162303 成绩: 2分 指导教师:娄嘉鹏 王志强 实验日期:3月17日 实验密 ...

  2. [NOIp2017提高组]列队

    [NOIp2017提高组]列队 题目大意 一个\(n\times m(n,m\le3\times10^5)\)的方阵,每个格子里的人都有一个编号.初始时第\(i\)行第\(j\)列的编号为\((i-1 ...

  3. light oj 1151 - Snakes and Ladders 高斯消元+概率DP

    思路: 在没有梯子与蛇的时候很容易想到如下公式: dp[i]=1+(∑dp[i+j])/6 但是现在有梯子和蛇也是一样的,初始化p[i]=i; 当有梯子或蛇时转移为p[a]=b; 这样方程变为: dp ...

  4. React.js学习知识小结（一）

    学习React也有半个月了吧,这里对所学的基础知识做个简单的总结.自己先是跟着官方文档学,差不多学了四五天,也跟着入门教程做了一个简单的小栗子.然后跟着阮一峰老师的教程上手了几个小Demo,后来在网上 ...

  5. Scala访问修饰符

    Scala 访问修饰符基本和Java的一样,分别有:private,protected,public. 如果没有指定访问修饰符符,默认情况下,Scala对象的访问级别都是 public. Scala ...

  6. 研究人员发现绝大部分酷派（Coolpad）手机暗藏后门(转)

    隐私问题被曝光得越来越多,随着物联网的发展,只会变得越来越严重,不过从当前看来 ,国人对隐私的重视度还远没有国外,期待加强对隐私的保护策略.   转自:http://www.freebuf.com/n ...

  7. 【转】Points To Line

    原文地址 Python+Arcpy操作Points(.shp)转换至Polyline(.shp),仔细研读Points To Line (Data Management)说明,参数说明如下: Inpu ...

  8. ThreadLocal用法详解和原理（转）

    本文转自https://www.cnblogs.com/coshaho/p/5127135.html 感谢作者 一.用法 ThreadLocal用于保存某个线程共享变量:对于同一个static Thr ...

  9. linux如何修改登录用户密码

    root登录后,passwd root可以修改root帐号的密码 其他具有sudo权限的用户登录后,sudo passwd root可以修改根帐号的密码 sudo passwd admin可以修改ad ...

  10. iOS: 工具栏控件UIToolBar和工具栏按钮控件UIBarButtonItem的使用

    一.工具栏控件:UIToolBar:UIView 介绍: ToolBar工具栏是视图View的属性,可以在工具栏上添加工具栏按钮Bar Button Item(可以是自定义的Custom.也可以是系统 ...