<!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. 解决vscode无法安装golang相关插件的问题 - 即无法直连golang.org的问题

    喜欢挂vpn或者代理的请无视本文. 其实golang.org上的插件在github.com上都有镜像,直接 git clone https://github.com/golang/tools git ...

  2. Spring Security的几个重要词

    1.SecurityContextHolder:是安全上下文容器,可以在此得知操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保存在SecurityContextHolder中. O ...

  3. puppet(1)-简介

    puppet: 开源的.新一代的集中化的配置管理工具: 目标状态 配置语言 Luke Kanies,puppet labs bootstrap --> configuration --> ...

  4. CocoaPods 添加WebP失败解决办法

    pod 'sdwebimage/webp' 下载libwebp 超时 [!] Error installing libwebp [!] /usr/bin/git clone https://chrom ...

  5. [Benchmark] Codeflaws: A Programming Competition Benchmark for Evaluating Automated Program Repair Tools

    Basic Information Publication: ICSE'17 Authors: Shin Hwei Tan, Jooyong Yi, Yulis, Sergey Mechtaev, A ...

  6. pandas功能使用rename, reindex, set_index 详解

    pandas rename 功能 在使用 pandas 的过程中经常会用到修改列名称的问题,会用到 rename 或者 reindex 等功能,每次都需要去查文档 当然经常也可以使用 df.colum ...

  7. 百度Aip人脸识别之python代码

    用python来做人脸识别代码量少 思路清晰, 在使用之前我们需要在我们的配置的编译器中通过pip install baidu-aip  即可 from aip import AipFace 就可以开 ...

  8. rmq区间最值

    时间复杂度O(NlogN)+O(Q) int a[N]; int dpmax[N][20],dpmin[N][20]; void first(int n) { mm(dpmax,0); mm(dpmi ...

  9. react withClamp装饰器

    Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...

  10. Vs code常用插件

    Vs code常用插件 1.View In Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firef ...