<!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. 阿里P8架构师谈：Restful、SOAP、RPC、SOA、微服务之间的区别（转载）

    转载来源:https://youzhixueyuan.com/the-difference-between-restful-soap-rpc-soa-and-micro-service.html 内容 ...

  2. 【图像处理】FFmpeg解码H264及swscale缩放详解

      http://blog.csdn.net/gubenpeiyuan/article/details/19548019 主题 FFmpeg 本文概要: 本文介绍著名开源音视频编解码库ffmpeg如何 ...

  3. Java学习笔记-网络编程

    Java提供了网络编程,并且在实际中有着大量运用 网络编程 网络编程概述 网络模型 OSI参考模型 TCP/IP参考模型 网络通讯要素 IP地址 端口号 传输协议 网络参考模型 网络通讯要素 IP地址 ...

  4. Opencv 简单视频播放器

    // C++ header and namespace #include <iostream> #include <string> #include <cstdlib&g ...

  5. Python之数据库

    Python之数据库: 1. Mysql 2. pymysql 3. SQLAlchemy Mysql 一.概述 什么是数据库 ? 答:数据的仓库,如:在ATM的示例中我们创建了一个 db 目录,称其 ...

  6. FTP-实例(Md5验证)

    import socket, os, hashlib server = socket.socket() server.bind(("localhost", 9999)) serve ...

  7. 怎样在 Vue 里面绑定样式属性 ?

    在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...

  8. CAS实现逻辑(JWT)

    由于没有获取正规做CAS的流程,这里根据网上的资料,写了一个自己觉得还可以的方案流程,留着备用 名称介绍: token:用于验证请求是否合法 refreshToken:当token失效后,客户端发送t ...

  9. jvm调试相关：jmap失效下找到alternatives神器

    1.使用 jmap <pid>出现的错误日志:很明显是版本问题 Error attaching to process: sun.jvm.hotspot.runtime.VMVersionM ...

  10. GridView直接打印

    /// <summary> /// 打印功能 /// </summary> /// <param name="panel">打印控件</p ...