<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

 <title>管理后台</title>

 <script src="../lib/jquery2.1.4.min.js"></script>

 <script src="../lib/Vue2.5.17.js"></script>

 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 </head>

 <body>

     <div id="app">

         <input type="text" v-model="firstname"> +

         <input type="text" v-model="lastname"> +

         <input type="text" v-model="fullname"> +

         <!-- 把fullname定义到computed属性中 -->

         <p>{{ fullname }}</p>

         <p>{{ fullname }}</p>

         <p>{{ fullname }}</p>

     </div>

     <script>

         var vm = new Vue({

             el : '#app',

             data : {

                 firstname : '',

                 lastname : '',

             },

             methods: {

             },

             computed: { //在computed中可以定义一些属性，这些属性叫做计算属性的本质就是一个方法

                 // 只不过我们在使用 这些计算属性的时候，是把它们的名称直接当作属性来使用

                 // 并不会把计算属性当一个方法调用

                 // 注意：计算属性在引用的时候一定不要加小括号去调用，直接把他当作普通 属性去使用

                 // 只要计算属性这个function内部所用到的任何data中的数据发生了变化就会立即重新计算这个属性的值

                 // 计算属性的求值结果会被缓存起来，方便下次直接使用，如果计算属性方法中所依赖的任何数据都没发生过变化，则不会对计算属性求值

                 'fullname' : function(){

                     console.log('ok');

                     return this.firstname + ' - ' + this.lastname

                 }

             },

             // watch，computed，和methods之间的对比。

             // computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算值，主要当作属性来使用

             // methods 方法表示一个具体的操作，主要用来写业务逻辑

             // watch 一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化从而进行某些具体的业务逻辑操作

         })

     </script>

 </body>

 </html>

Vue系列之 => computed实现求值的更多相关文章

  1. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  2. 深入理解JavaScript系列（19）：求值策略(Evaluation strategy)

    介绍 本章,我们将讲解在ECMAScript向函数function传递参数的策略. 计算机科学里对这种策略一般称为“evaluation strategy”(大叔注:有的人说翻译成求值策略,有的人翻译 ...

  3. Vue学习笔记 ——computed VS methods

    对于最终的结果,两种方式确实是相同的.然而,不同的是计算属性是基于它们的依赖进行缓存的.计算属性只有在它的相关依赖发生改变时才会重新求值.这就意味着只要 message 还没有发生改变,多次访问 re ...

  4. Vue.js中 computed 和 methods 的区别

    官方文档中已经有对其的解释了,在这里把我的理解记录一下Vue中的methods.watch.computed computed 的使用场景 HTML模板中的复杂逻辑表达式,为了防止逻辑过重导致不易维护 ...

  5. vue中的computed和watch区别

    在vue.js官方文档中看到computed和watch获取全名的一个例子: var var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', ...

  6. Vue框架，computed和watch的区别

    computed和watch定义 1.computed是计算属性,类似于过滤器,对绑定到视图的数据进行处理.官网的例子: <div id="example"> < ...

  7. 手写 Vue 系列 之 Vue1.x

    前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...

  8. 手写 Vue 系列 之 从 Vue1 升级到 Vue2

    前言 上一篇文章 手写 Vue 系列 之 Vue1.x 带大家从零开始实现了 Vue1 的核心原理,包括如下功能: 数据响应式拦截 普通对象 数组 数据响应式更新 依赖收集 Dep Watcher 编 ...

  9. 【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

    前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一 ...

随机推荐

  1. Linux之文件系统各种符号说明

    / 根目录 唯一必须挂载的目录.不要有任何的犹豫,选一个分区,挂载它!(在绝大多数情况下,有10G的容量应该是够用了.当然了,很多东西都是多多益善的) /boot 它包含了操作系统的内核和在启动系统过 ...

  2. go对json对象的生成和解析

    https://blog.csdn.net/benben_2015/article/details/78917374

  3. MTK NTP和NITZ更新时间的问题

    NITZ(Network Identity and Time Zone,网络标识和时区),是一种用于自动配置本地的时间和日期的机制,同时也通过无线网向移动设备提供运营商信息.NITZ是自从PHASE ...

  4. mysql 字符串 拼接 截取 替换

    一. 字符串拼接 concat('asdf',str); 说明: 拼接asdf 和 str 二. 字符串截取 从左开始截取字符串 left(str, length) 说明:) as abstract ...

  5. Unity长连接

    http://blog.csdn.net/claine/article/details/52374546

  6. 排序算法--插入排序(Insertion Sort)_C#程序实现

    排序算法--插入排序(Insertion Sort)_C#程序实现 排序(Sort)是计算机程序设计中的一种重要操作,也是日常生活中经常遇到的问题.例如,字典中的单词是以字母的顺序排列,否则,使用起来 ...

  7. Abp之工作单元与事务

    环境:Abp1.2 疑问:没有调用工作单元的SaveChanges方法引起的事务提交时机的问题. 例如:有一个应用服务代码如下: public void CreatePhrase(PhraseCrea ...

  8. Python Pandas 箱线图

    各国家用户消费分布 import numpy as np import pandas as pd import matplotlib.pyplot as plt data = { 'China': [ ...

  9. GBDT 详解分析 转+整理

    GBDT DT 回归树 Regression Decision Tree 梯度迭代 GBDT工作过程实例 需要解释的三个问题 - 既然图1和图2 最终效果相同,为何还需要GBDT呢? - Gradie ...

  10. 10.30 rest_framework总结

    2018-10-30 20:25:23 终于学完了rest_framework  这个框架! 这个框架有一些基本组件!最重要的就是看源码!要一个类一个类的去找!按顺序! 并且要自己配置类的时候要先看源 ...