<!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. matlab与python读取tiff文件

    matlab t=Tiff('IMG_3952.TIF', 'r+'); k = 1; t.setDirectory(k); img{k} = t.read(); src = img{1}; dst( ...

  2. The processing instruction target matching &quot;[xX][mM][lL]&quot; is not allowed.

    现象: ERROR   : The processing instruction target matching "[xX][mM][lL]" is not allowed.  异 ...

  3. Lock 从来就没有成功过

    package lime.thinkingInJava._021._005._003; import java.util.concurrent.ExecutorService; import java ...

  4. link元素 rel src href属性

    The SRC and HREF attributes are used to include some external entities like an image, a CSS file, a ...

  5. B - Tree Recovery

    Little Valentine liked playing with binary trees very much. Her favorite game was constructing rando ...

  6. react 中的绑定事件

    handleOpen = (e)=> { this.setState({ open: true }) } <Button color='primary' onClick={this.han ...

  7. mybatis07--关联查询一对多

    案例   查询国家的同时,查询出国家下的省会信息! 01.使用单表的连接查询 创建对应的实体类 和数据库表 /** * *国家的实体类 */ public class Country { privat ...

  8. IFrame标签的两个用法介绍

    1. 作为弹出层铺底覆盖 大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素,那就有得头疼了(原理就不在这里赘述了).我们会发现弹出的DIV没法遮住sel ...

  9. call()的个人理解

    先看两道道面试题 面试题1: var number = 50; var obj = { number: 60, getNum: function() { var number = 70; return ...

  10. RGBA与Opacity

    rgba(r,g,b,a) 都与透明度有关,rgba不会影响文字,opacity则会.