<!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. ATR的计算

    TR=∣最高价-最低价∣和∣最高价-昨收∣和∣昨收-最低价∣的最大值 TR = max(high-low, abs(last-high), abs(last-low)) ATR = MA(TR, N) ...

  2. 揭秘Java热部署原理及JRebel(Hotcode)的实现原理

    基础知识:class卸载.热替换和Tomcat的热部署的分析HotSwap:HotSwap和JRebel原理成熟的热部署技术实现原理:深入探索 Java 热部署 java的热部署和热加载

  3. Windows SDK DDK WDK (Windows Driver Kit) 区别

    首先,先从基础的东西说起,开发WINDOWS下的驱动程序,需要一个专门的开发包,如:开发JAVA程序,我们可能需要一个JDK,开发WINDOWS应用程序,我们需要WINDOWS的SDK,现在开发WIN ...

  4. Object.assign方法的使用

    https://www.cnblogs.com/chenyablog/p/6930596.html

  5. Spring data Jpa 分页从1开始,查询方法兼容 Mybatis,分页参数兼容Jqgrid

    废话少说 有参数可以设置 在org.springframework.boot.autoconfigure.data.web.SpringDataWebProperties 中 /** * Whethe ...

  6. Factory——工厂方法

    一.定义 GOF上对工厂方法的意图如此描述:定义一个用于创建对象的接口,让子类决定实例化哪个类.Factory Method使一个类的实例化延迟到其子类. 作为类的开发者,我们通常会在类中提供构造器方 ...

  7. linux下批量杀死进程

    ps aux|grep python|grep -v grep|cut -c 9-15|xargs kill -15 管道符“|”用来隔开两个命令,管道符左边命令的输出会作为管道符右边命令的输入.下面 ...

  8. 【CF471E】MUH and Lots and Lots of Segments 扫描线+并查集+线段树+set

    [CF471E]MUH and Lots and Lots of Segments 题意:给你平面上n条水平或竖直的,端点在整点处的线段.你需要去掉一些线段的一些部分,使得剩下的图形:1.连通,2.无 ...

  9. JAVA课程课后作业之使用递归完成回文

    一.思路 1.我的想法是利用数组的做法来进行,先是用scanner录入一个String类 2.然后就是将String转化成char数组 3.递归的就是第一个和最后一个对比,然后第一个加一,最后一个减一 ...

  10. vue里的watch 和 computed 监听的不同

    1.computed里是偏向于通过监听data里的值变化后,经过运算返回一个新的计算结果, 所以k不能与data里的k重名,并且必须有return, 能够缓存,依赖的值不变化不会进行重复计算: 而wa ...