<!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. 【动态规划去除冗余】NOIP2010-乌龟棋

    [题目大意] [思路] 最简单的思路是五维数组,但是当前走到的步数由已经取到的卡片决定,所以只需要四维.本来想要改一个滚动数组的,但是好像没有滚起来,算了(ノ｀Д)ノ. 在学校要晚自习到21:15,回 ...

  2. fastjson生成json时Null属性不显示的解决方法

    举个例子 Map < String , Object > jsonMap = new HashMap< String , Object>(); jsonMap.put(&quo ...

  3. Codeforces Round #344 (Div. 2) C. Report 其他

    C. Report 题目连接: http://www.codeforces.com/contest/631/problem/C Description Each month Blake gets th ...

  4. Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) F. Double Knapsack 鸽巢原理 构造

    F. Double Knapsack 题目连接: http://www.codeforces.com/contest/618/problem/F Description You are given t ...

  5. 让SignalR客户端回调支持强类型

    几天写一个小程序的时候用到了SignalR,发现现在SingalR Server 支持强类型了,也就是说,我们可以定义一个客户端的通知契约: public interface IClient    { ...

  6. 使用git bash 代替cmd

    上一文章,用Node.js建HTTP服务器,然后在cmd启动,这次尝试用git bash. git bash 也是命令行工具,画面更好看,使用更方便,可以替代cmd. 下载git:https://gi ...

  7. hive删除列

    hive中删除列时没有与mysql语句alter table <table> drop column <col>对应的语句. 然而依然可以完成此功能:使用ALTER TABLE ...

  8. android 监控软键盘确定 搜索 按钮并赋予点击事件

    在android的实践开发中,为了界面的美观,往往那些搜索框并没有带搜索按钮,而是调用了软键盘的搜索按钮,完成这次时间 1 2 好吧!直接上代码! <EditText android:id=&q ...

  9. rbac控制下无法创建poddisruptionbudgets

    先通过下面命令找到具体的命名空间的rbac kubectl get role --all-namespaces kubectl get role aaa -o yaml 然后倒入到yaml文件中添加 ...

  10. [Todo] Git & 版本控制学习

    下面这篇写的非常好.git分支介绍,有图.好好看这一篇,就懂了: http://www.open-open.com/lib/view/open1328069889514.html 该系列还有不少文章, ...