vue.js实战——计算属性
1set和get:
注意：
this.lastName=names[names.length-1];//解决连续输入空格后lastName消失的问题
练习代码如下：
<!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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="fullName">
<br>
firstName: <input type="text" v-model="firstName"/>
<br>
lastName: <input type="text" v-model="lastName"/>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed:{
fullName:{
//getter,用于读取
get:function(){
return this.firstName+' '+this.lastName;
},
set:function(newValue){
var names=newValue.split(' ');
this.firstName=names[0];
// this.lastName=names[1]; 这样子在多个连续空格的情况下，lastname消失的
this.lastName=names[names.length-1];
}
}
}
})
</script>
</body>
</html>
计算属性还有两个很实用的小技巧容易被忽略：
1计算属性可以依赖其他计算属性。
2计算属性不仅可以依赖当前vue实例的数据，还可以依赖其他实例的数据。
<!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>
<script src="./vue.js"></script>
</head>
<body>
<div id="app1">
{{arr}}
</div>
<div id="app2">
{{reversedTest}}
</div>
<script>
var app1=new Vue({
el:"#app1",
data:{
text:'123,456'
},
computed:{
arr:function(){
return this.text.split(',').reverse();
}
}
});
var app2=new Vue({
el:"#app2",
data:{ },
computed:{
reversedTest:function(){
return app1.arr.join(',');
}
}
})
</script>
</body>
</html>
计算属性缓存：
调用methods里的方法也可以与计算属性起到同样的作用。
<div id="app">
<!-- 注意，这里的reversedText是方法，所以要带() -->
{{reversedText()}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
text:'123,456'
},
methods:{
reversedText:function(){
//这里的this指向的是当前Vue实例
return this.text.split(',').reverse().join(',');
}
}
})
</script>
计算属性是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以上例中text只要不改变，计算属性也就不会更新。
computed:{
now:funcntion(){
return Date.now();
}
}
这里的Date.now()不是响应式依赖，所以计算属性now不会更新。但是methods则不同，只要重新渲染，它就会被调用，因此函数也会被执行。
使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非你不希望得到缓存。
vue.js实战——计算属性的更多相关文章
- Vue.js：计算属性
ylbtech-Vue.js:计算属性 1.返回顶部 1. Vue.js 计算属性 计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: 实例 ...
- 关于vue.js的计算属性练习代码
参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...
- Vue.js之计算属性（computed）、属性监听（watch）与方法选项（methods）
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- Vue.js的计算属性
开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下ap ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- Vue学习之vue中的计算属性和侦听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
随机推荐
- year 和 weak year 的区别
java 中使用 SimpleDateFormat 时,会遇到 year 和 week year 这两个概念,特此记录. google 答案: A week year is in sync with ...
- Java中的锁——锁的分类
Java中有各种各样的锁,例如公平锁.乐观锁等等,这篇文章主要介绍一下各种锁的分类. 按照其性质分类 公平锁/非公平锁 公平锁是指多个线程按照申请锁的顺序来获取锁. 非公平锁是指多个线程获取锁的顺序并 ...
- 史上最全python面试题详解（四）（附带详细答案（关注、持续更新））
python高级进阶-网络编程和并发(?道题详解) 1.简述 OSI 七层协议. OSI是Open System Interconnection的缩写,意为开放式系统互联. OSI七层协议模型主要是: ...
- Spring boot入门（一）：快速搭建Spring boot项目
(一)Spring boot介绍 本部分摘自:https://www.zhihu.com/question/64671972/answer/223383505 Spring Boot是由Pivotal ...
- 你真的了解PeopleSoft中的function和method方法嘛
谈下function和method在内嵌与外部传参的区别 1.内嵌函数(Internal Functions) 看下现在输出&x的话会返回什么值? 2.内嵌函数(Internal Functi ...
- iOS----------Xcode9无线调试教程
软硬件要求: - Xcode 9.0 beat 及以上版本 - macOS 10.12.5 及以上版本 - iOS 11.0 beat 及以上版本 网络连接要求 - 电脑和设备处于同一 Wifi 环境 ...
- 基础环境系列：MySQL8.0.12
机型与版本:windows10(64-bits) Mysql环境配置:mysql8.0.12 一.MySQL安装 Mysql的安装有两种方法,一种是通过.msi一种是通过压缩包.穷呢,大家就老实下社区 ...
- PM过程管理成熟度1级
之前,我已经从项目实现的角度.企业管理诉求两方面,分析了PM的核心能力架构,以及其在过程管理方面的能力等级.接下来,Fancier凡奉信息会站在PM能力成长的角度,横向与纵向阐述每一成熟度等级PM的过 ...
- PJSUA2开发文档--第五章 帐户（号）Accounts
第五章 帐户(号) 帐户提供正在使用该应用程序的用户的身份(或身份).一个帐户有一个与之相关的SIP统一资源标识符(URI).在SIP术语中,该URI用作该人的记录地址( Address of Rec ...
- Spring MVC 响应视图（六）
完整的项目案例: springmvc.zip 目录 实例 除了依赖spring-webmvc还需要依赖jackson-databind(用于转换json数据格式) <dependency> ...