<!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. Python Network Security Programming-1

    UNIX口令破解1.程序运行需求: 其中dictionary.txt文件为破解口令的字典文件,passwords.txt文件为临时存放UNIX系统密码的文件 2.程序源码: import crypt ...

  2. python界面编程

    这是一个简单的加法计算器 首先,要先对这个简易计算器进行布局设计,需要两个输入框,还有一个输入框用于存放就算的结果,还需要两个table,一个是"+"一个是"=" ...

  3. PYTHON 100days学习笔记007-2：python数据类型补充(2)

    目录 day007:python数据类型补充(2) 1.Python3 元组 1.1 访问元组 1.2 删除元组 1.3 元组运算符 1.4 元组索引,截取 1.5 元组内置函数 2.python3 ...

  4. ./configure配置的参数 交叉编译 host,build target的含义

    交叉编译 host,build target的含义:build就是你正在使用的机器,host就是你编译好的程序可以运行的平台,target就是你编译的程序可以处理的平台.这个 build和host比较 ...

  5. 20191204-使用nginx解决ajax测试调用接口跨域问题

    问题描述 之前要测试一个http的接口,在postman中测试成功,但使用ajax调用却跨域.于是通过使用ngin反向代理的方式来解决ajax调用跨域问题 测试页面的内容 <html> & ...

  6. MySQL优化——索引

    内容来自:https://yq.aliyun.com/articles/214494?utm_content=m_31338 对此我们来详细分析下(也就是大家在面试时需要说的): 场景一,数据表规模不 ...

  7. $listeners 在vue中的使用 --初学

    事件回传之 $listeners 组件由下向上回传事件 <!doctype html><html lang="en"> <head> <m ...

  8. 用链式字典树解决POJ2945

    首先,我们的思路是用链式的字典树结构,解决poj2945这道题 题意是,统计所有的字符串出现的次数,并依次输出各个次数的数量 例如: input 9 6AAAAAAACACACGTTTTGACACAC ...

  9. javascript——定义函数方式

    1:有名函数定义方式 2:匿名函数定义方法 https://www.cnblogs.com/wl0000-03/p/6050108.html console.log(add(3,6)); (funct ...

  10. C C语言中 *.c和*.h文件的区别！

    一个简单的问题:.c和.h文件的区别学了几个月的C语言,反而觉得越来越不懂了.同样是子程序,可以定义在.c文件中,也可以定义在.h文件中,那这两个文件到底在用法上有什么区别呢? 2楼:子程序不要定义在 ...