<!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. Hyperledger Fabric1.4 网络环境搭建步骤

    1.  外部访问虚拟机: 安装ssh apt-get install openssh-server openssh-client 2.  安装vim sudo apt install vim 3.  ...

  2. USACO 1.3 Name That Number【暴搜】

    裸的穷举搜索. 研究了好久怎么输入$dict.txt$,$USACO$好像对$freopen$的顺序还有要求? /* ID: Starry21 LANG: C++ TASK: namenum */ # ...

  3. win10下查看进程，杀死进程

    参考链接:https://blog.csdn.net/qq_36819098/article/details/80262482

  4. ubuntu 16.04主题美化

    目录 numix图标 Flatabulous主题 参考: Unity-tweak-tool插件 numix图标 sudo apt-add-repository ppa:numix/ppa sudo a ...

  5. [转帖]安装prometheus+grafana监控mysql redis kubernetes等

    安装prometheus+grafana监控mysql redis kubernetes等 https://www.cnblogs.com/sfnz/p/6566951.html plug 的模式进行 ...

  6. win10下访问vm虚拟机Linux服务

    一.环境 win10操作系统 centos6.5 VMware® Workstation 14 Pro虚拟机 二.互相访问设置步骤 1.查看如下图所示 2.记住上面的IP和网关,进行如下图操作 点击应 ...

  7. plsql软件使用手册

    记录登陆密码及用户名

  8. CrawlerRunner没有Log输出

    官网log说明:https://docs.scrapy.org/en/latest/topics/logging.html#scrapy.utils.log.configure_logging 这里记 ...

  9. MongoDB对数组元素及内嵌文档进行增删改查操作

    比如我有一个user类,他包含一个标签属性,这个标签是一个数组,数组里面的元素是内嵌文档,格式如下: {    "_id" : "195861",    &qu ...

  10. JWT的认识和session的区别

    1.前后端分离框架中前端和后端域名不同,不能跨域请求,加上移动端无cookie,所以无法使用session.2.基于token的认证和传统的session认证的区别: 传统的session认证: 我们 ...