<!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

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

     <meta http-equiv="X-UA-Compatible"  content="ie=edge">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

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

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

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

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

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

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

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

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           firstname:'',

           lastname:'',

           middlename:''

         },

         methods:{},

         computed:{ //在computed中，可以定义一些 属性，这些属性，叫做【计算属性】，计算属性的本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把它们的名称，直接当作 属性来使用；并不会把计算属性，当作方法去调用；

           //注意1：计算属性，在引用的时候，一定不要加()去调用，直接把它当作 普通属性去使用就好了；

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

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

         'fullname':function(){

           console.log('ok')

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

         }

         }

           });

       </script>

   </body>

 </html>

第八章 watch监听 85 computed-计算属性的使用和3个特点的更多相关文章

  1. vue computed计算属性和watch监听属性解疑答惑

    computed计算属性     计算属性类似于方法,用于输出data中定义的属性数据的结果,data数据变化时,计算属性的结果会同步变化,需要注意的是计算属性不可与data定义的属性同名. 相比于方 ...

  2. vue computed计算属性 watch监听

    计算属性 computed:{ 变量:function(){ return 计算好的值 } } 这时候计算好的值 就付给了你的变量 在实例中可以this.使用 注意 声明的变量的data中不可以重复声 ...

  3. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  4. Vue之computed计算属性

    demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

  5. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  6. Vue（七）：computed计算属性

    简介 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 实例1 可以看下以下反转字符串的例子: <div id="app"> {{ mes ...

  7. 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. computed 计算属性

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=wepy%e9%a1%b9%e7%9b%ae%e7%9a%8 ...

  9. iOS 监听控件某个属性的改变observeValueForKeyPath

    创建一个测试的UIButton #import "ViewController.h" @interface ViewController () @property(nonatomi ...

随机推荐

  1. 【并行计算-CUDA开发】关于共享内存（shared memory）和存储体(bank)的事实和疑惑

    关于共享内存(shared memory)和存储体(bank)的事实和疑惑 主要是在研究访问共享内存会产生bank conflict时,自己产生的疑惑.对于这点疑惑,网上都没有相关描述, 不管是国内还 ...

  2. POJ1988 Cube Stacking 【并查集】

    题目链接:http://poj.org/problem?id=1988 这题是教练在ACM算法课上讲的一道题,当时有地方没想明白,现在彻底弄懂了. 题目大意:n代表有n个石头,M a, b代表将a石头 ...

  3. [转帖]k8s国内镜像

    k8s国内镜像 https://www.jianshu.com/p/b9fecdb5e3a7 wu_sphinx 关注 2019.05.06 20:43* 字数 155 阅读 628评论 0喜欢 0 ...

  4. soap-ws获取ws中的所有的接口方法

    soap-ws获取wsdl中的所有的接口方法 示例wsdl文件如下,生成的过程可以参考https://www.cnblogs.com/chenyun-/p/11502446.html: <def ...

  5. 跑跑卡丁车（dp）

    题意:https://www.nitacm.com/problem_show.php?pid=1470 #define IOS ios_base::sync_with_stdio(0); cin.ti ...

  6. GitHub访问及git工具克隆慢问题解决

    一.查询合适的DNS服务器 1.站长工具DNS查询服务器 github.com github.global.ssl.fastly.net 2.选择TTL值最小的记录,记录下对应服务器IP地址 例如 g ...

  7. paramiko模块(远程操作服务器)

    paramiko模块(远程操作服务器) django+paramkio实现远程某些服务器执行命令+上传文件 用于帮助开发者通过代码远程连接服务器,并对服务器进行操作. pip3 install par ...

  8. 树莓派3b 串口乱码的一个解决思路

    首先确认波特率设置正确,为115200 向microSD卡中烧录树莓派官方的镜像后,先不要急着把它插入树莓派中. 在电脑上打开microSD卡,按如下方式修改config.txt和cmdline.tx ...

  9. js循环遍历性能

    定length for循环 (有length) 不定length for循环(使用数组length) 不定length for循环(判断数组length是否存在) forEach(Array自带,对某 ...

  10. Java设计模式只好

    有时,一些学生私下问我:如何学习前端问题.这里有一个统一的回复,下次我遇到这个问题,同学们会直接给你发这篇文章的链接地址. “如何学习前端”应该因人而异,其他人的方法可能不适合自己.让我们谈谈我的学习 ...