<!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. 使用Docker快速创建.Net Core2.0 Nginx负载均衡节点

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.Self-Host Kestrel 1. 在vs2017中新建dotnet core2. ...

  2. 超简单C#获取带汉字的字符串真实长度（单个英文长度为1,单个中文长度为2）

    https://blog.csdn.net/u014732824/article/details/84952848 int i = System.Text.Encoding.Default.GetBy ...

  3. a，abbr，address，area，article， aside， audio标签文档

    <a>标签 download属性 <!-- 下载hello.txt --> <a href="test.txt" download="hel ...

  4. 【Postgres】空间数据库创建

    1.数据库创建问题-Navicat-ERROR: source database "template1" is being accessed by other users 2.解决 ...

  5. Python Pandas 时间序列双轴折线图

    时间序列pv-gmv双轴折线图 import numpy as np import pandas as pd import matplotlib.pyplot as plt n = 12 date_s ...

  6. Python中的test测试

    不知道怎么回事,打开的工程中出现了pytest,难道是检测到了我的命名中有test吗? 参考博文:https://blog.csdn.net/weixin_41605937/article/detai ...

  7. RE:从零开始的莫比乌斯反演

    炫酷反演魔术根本看不懂啊...也就看看PoPoQQQ的ppt了. 这个赛季结束了,一年可以学很多很多东西呢. 因为我是写给自己看的所以写的很垃圾. 公式: 按我的理解,反演就是  x可以表示成y,然后 ...

  8. 27.用webpack自搭react和vue框架

    自己搭建react-app vue-cli 前置条件 cnpm i -D webpack webpack-cli webpack-dev-server cnpm i -D css-loader sty ...

  9. export及export default的区别

    在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方 ...

  10. select 标签判断value值相同 就selected高亮

    我写的是里面嵌套php标签 <select name="bq_id[]" multiple="multiple"> <volist name= ...