第八章 watch监听 85 computed-计算属性的使用和3个特点
时间:2019-06-12
本文章向大家介绍第八章 watch监听 85 computed-计算属性的使用和3个特点,主要包括第八章 watch监听 85 computed-计算属性的使用和3个特点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 16 <input type="text" v-model="firstname">+ 17 <input type="text" v-model="middlename">+ 18 <input type="text" v-model="lastname">= 19 <input type="text" v-model="fullname"> 20 21 <p>{{fullname}}</p> 22 <p>{{fullname}}</p> 23 <p>{{fullname}}</p> 24 </div> 25 26 <script> 27 //创建 Vue 实例,得到 ViewModel 28 var vm = new Vue({ 29 el:'#app', 30 data:{ 31 firstname:'', 32 lastname:'', 33 middlename:'' 34 }, 35 methods:{}, 36 computed:{ //在computed中,可以定义一些 属性,这些属性,叫做【计算属性】,计算属性的本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把它们的名称,直接当作 属性来使用;并不会把计算属性,当作方法去调用; 37 38 //注意1:计算属性,在引用的时候,一定不要加()去调用,直接把它当作 普通属性去使用就好了; 39 //注意2:只要计算属性,这个function内部,所用到的任何 data中的数据发生了变化,就会立即重新计算 这个计算属性的值 40 //注意3:计算属性的求值结果,会被缓存起来,方便下次直接使用;如果 计算属性方法所依赖的任何数据,都没有发生过变化,则,不会重新对 计算属性求值; 41 'fullname':function(){ 42 console.log('ok') 43 return this.firstname+'-'+this.middlename+'-'+this.lastname 44 } 45 } 46 }); 47 </script> 48 </body> 49 </html>
原文地址:https://www.cnblogs.com/songsongblue/p/11011661.html
- Java设计模式-观察者模式
- 今天处理的三个小问题——20160120(r7笔记第84天)
- 主备切换的准备工作(r7笔记第83天)
- Java设计模式-外观模式
- Java设计模式-组合模式
- 使用shell批量监控磁盘坏块(二) (r7笔记第80天)
- JavaWeb10-request&response你不得不学(1)
- dg的奇怪问题终结和分区问题答疑 (r7笔记第77天)
- 最近让我焦灼的四个问题(有解) (r7笔记第76天)
- JavaWeb10-reques;response你不得不学(2)
- 很多人比较纠结的约束和索引的关系(r7笔记第75天)
- JavaWeb09-Servlet(Java真正的全栈开发)
- JavaWeb08-XML,tomcat,HTTP轻松入门
- JavaWeb07-JDBC(Java真正的全栈开发)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PyTorch7:torch.nn.init
- Puppeteer 入门与实战
- 【DB笔试面试854】在Oracle中,删除数据库的方式有哪几种?
- 方差齐性检验
- Windows WSL2 htop打开黑屏的问题解决
- 【DB笔试面试855】在Oracle中,简单说说PSU升级的过程
- HashMap中add()方法的源码学习
- IOC容器实现
- Docker安装mysql
- 【LeeCode 面试题】二叉树的前序遍历,中序遍历,后序遍历递归和迭代的两种实现方式
- MySQL笔记汇总
- 【DB笔试面试856】在Oracle中,如何判定实例是否运行?
- 【DB笔试面试857】在Oracle中,若一个主机上有多个Oracle实例,则如何确定哪些共享内存段属于想要清掉的实例的内存段?
- vue + flask实现邮件密码找回功能
- PicGo + Gitee 构建免费云图床