<!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. etcd配置参数详解

    针对ETCD版本 3.2.17 --name 节点名称 default: "default" env variable: ETCD_NAME 这个值和--initial-clust ...

  2. 【VS开发】VSTO 学习笔记（十）Office 2010 Ribbon开发

    微软的Office系列办公套件从Office 2007开始首次引入了Ribbon导航菜单模式,其将一系列相关的功能集成在一个个Ribbon中,便于集中管理.操作.这种Ribbon是高度可定制的,用户可 ...

  3. Docker的网络模式和跨主机通信

    文章转载自:http://www.a-site.cn/article/169899.html   Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docke ...

  4. SQL SERVICES 搭建问题

    一.SQL SERVICES  设置IP 连接 SQL2008是没有外围配置的,为了能用IP地址或者local登陆,需要做下面的配置. 打开Microsoft SQL Server 2008 R2→配 ...

  5. 第二章 impala基础使用

    第二章 impala基本使用 1.impala的使用 1.1.impala-shell语法 1.1.1.impala-shell的外部命令参数语法 不需要进入到impala-shell交互命令行当中即 ...

  6. if(!ConnectDBProc(strCmd,m_dbUserName,m_dbPassword))

    https://wenku.baidu.com/view/826b3d426bec0975f565e204.html

  7. HTML+CSS常用代码（笔记）

    注释标签:对代码进行说明 <!-- 单行注释,也可以对多行文字进行注释 --> 常用格式标签 <b>加粗</b> <i>斜体</i> < ...

  8. PAT B1006 换个格式输出整数 (15)

    AC代码 #include <cstdio> const int max_n = 3; char radix[max_n] = {' ', 'S', 'B'}; int ans[max_n ...

  9. [git] git error: unable to unlink old

    今天git pull ,结果报错 :   git error: unable to unlink old 原因是   文件夹内 一个exe 处于打开状态. 哈哈哈哈,又是个低级错误~~~ 下次注意呀~

  10. pat L2-008 复习manacher

    马上要去比赛了 复习一下最长回文串的长度. 算法的实现两个步骤: 1. 一个是对原串的处理,在所有的空隙位置(包括首尾)插入同样的符号,要求这个符号是不会在原串中出现的.这样会使得所有的串都是奇数长度 ...