VUE：计算属性和监视
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1、计算属性：
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算结果
2、监视属性：
通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时，回调函数自动调用，在函数内部进行计算
3、计算属性高级：
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存，多次读取只执行一次getter计算
--> <div id="app">
姓：<input type="text" placeholder="First Name" v-model="firstName"/><br />
名：<input type="text" placeholder="Last Name" v-model="lastName" /><br />
姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"/><br />
姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"/><br />
姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"/><br />
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript">
//const常量
const vm=new Vue({
el:"#app",
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
//计算属性的方法,方法的返回值作为属性值。
//执行条件：初始化显示的时候或data发生改变的时候调用
fullName1(){
return this.firstName+' '+this.lastName;
},
fullName3:{
//回调函数（1.你定义的，2.你没有调，3.但最终它执行了）计算并返回结果
//当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get(){
return this.firstName+' '+this.lastName;
},
//当属性值发生改变时回调，更新相关的属性数据
//value：fullName3的最新值
set(value){
const names=value.split(' ');
this.firstName=names[0];
this.lastName=names[1];
}
} },
watch:{
//传参 (新的值,旧的值) 或 (旧的值)
firstName:function(value){
this.fullName2=value+' '+this.lastName;
},
/*lastName:function(value){
this.fullName2=this.firstName+' '+value;
}*/
}
}) vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value;
})
</script>
</body>
</html>
重点：计算属性存在缓存
VUE：计算属性和监视的更多相关文章
- (尚004)Vue计算属性之基本使用和监视
所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- (尚006)Vue计算属性之set与get
test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...
- Vue计算属性
github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...
- 在做vue计算属性，v-for处理数组时遇到的一个bug
bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...
- vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...
- vue 计算属性 实例选项 生命周期
vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...
- Vue计算属性缓存(computed) vs 方法
Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...
- vue 计算属性实现过滤关键词
效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
随机推荐
- Python for json
# Json- json格式是一个键值对形式的数据集 - key:字符串 - value:字符串,数字,列表,json - json使用大括号包裹 - 键值对直接用逗号隔开 - json和Python ...
- bzoj 3236: [Ahoi2013]作业（缺线段树）
3236: [Ahoi2013]作业 Time Limit: 100 Sec Memory Limit: 512 MBSubmit: 1744 Solved: 702[Submit][Status ...
- Java Secret: Using an enum to build a State machine（Java秘术：用枚举构建一个状态机）
近期在读Hadoop#Yarn部分的源代码.读到状态机那一部分的时候,感到enmu的使用方法实在是太灵活了,在给并发编程网翻译一篇文章的时候,正好碰到一篇这种文章.就赶紧翻译下来,涨涨姿势. 原文链接 ...
- android创建桌面快捷键shortcut
有非常多人也写过创建桌面快捷键的blog.可是大部分都仅仅讲了怎么用,事实上技术使用起来都非常easy.可是你使用后下次还知道吗? 根本原因还是不清楚原理.今天我就来讲讲shortcut创建过程. 过 ...
- Codeforces Gym 100015F Fighting for Triangles 状态压缩DP
F Fighting for Triangles Description Andy and Ralph are playing a two-player game on a triangular bo ...
- Bitcoin学习篇之---PPS和PPLNS挖矿模式介绍
PPS和PPLNS挖矿模式介绍 比特币每10分钟产生一个区块,会有千万人竞争.而这个区块终于仅仅归1个人全部.其他人都颗粒无收. 你或许要挖5年才干获得一个区块. 组队挖矿就是.一旦队伍里不论什么人获 ...
- [MySQL] 查询一段时间记录
24小时内记录(即86400秒) $sql="SELECT video_id,count(id)as n FROM `rec_down` WHERE UNIX_TIMESTAMP(NOW() ...
- Python学习网络爬虫--转
原文地址:https://github.com/lining0806/PythonSpiderNotes Python学习网络爬虫主要分3个大的版块:抓取,分析,存储 另外,比较常用的爬虫框架Scra ...
- ValueProvider核心的值提供系统
Model绑定的数据具有多种来源: 提交的表单 Json字符串 当前路由数据 请求地址的查询字符串 ASP.NET MVC将这种基于不同数据来源的数据提供机制实现在ValueProvider的组件中 ...
- Core Java(四)
四.数组 数组就是主函数(main方法)中的参数:public static void main(String[] args){ }数组是指一组数据的集合,数组中的每个数据称为元素.在Java中 ...