首页 > 其他分享> 文章详细

vue(vue.js) 计算属性

2022-09-02 15:32:13 阅读：195 来源： 互联网

标签：vue firstName get lastName js fullName 属性

原文链接：vue(vue.js) 计算属性 – 每天进步一点点 (longkui.site)

0.案例

一个需求，将一个人姓和名拼接起来，但是这个人的姓或者名比较长，有可能需要裁剪，但是不希望在HTML中写的太复杂。

比如，出来现实这个人的姓名以外，要求将这个人的姓名中的大小写反转，截取前3位，将某一位变成随机数…..

我们用插值语法可以简单实现此功能：

我们也可以用methods来实现，比如下面这样：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue测试</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> </br> 名：<input type="text" v-model="lastName"> </br> 姓名：<span> {{getFullName()}} </span> </div> <script type="text/javascript"> new Vue({ el:'#root', data:{ firstName:"张", lastName:"三" }, methods:{ //拼接名字 getFullName(){ return this.firstName+"-"+this.lastName } } }) </script> </body> </html>

但是这样的效率很低，因为一旦input中的数据改变，那么就会调用getFullName方法。

1.计算属性

首先需要理解什么叫属性，对于vue来讲，data里面的叫属性，比如下面这样：

data:{ firstName:"张", lastName:"三" },

冒号之前的叫属性名，冒号之后的叫属性值。

计算属性:相当于计算数据，属性等于data里面的数据。比如我们拿firstName和lastName 计算出一个新的属性fullName。但是你不能像下面这样写

data:{ firstName:"张", lastName:"三", fullName:firstName+lastName },

在vue中，属性和计算属性是分开写的，计算属性用computed表示,而且要求把计算的过程定义成一个对象。比如下面这样：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue测试</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> </br> 名：<input type="text" v-model="lastName"> </br> 姓名：<span> {{fullName}} </span> </div> <script type="text/javascript"> new Vue({ el:'#root', data:{ firstName:"张", lastName:"三" }, computed:{ fullName:{ //get的作用，当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 get(){ console.log("get被调用了") return this.firstName + this.lastName //注意通过this访问 } } }, methods:{ } }) </script> </body> </html>

那么这样写，就可以正常使用计算属性了。

另外，get的调用时机为：
（1）初次读取的时候，会调用。

（2）所依赖的数据发生变化时，比如上面fullName用到了firstName和lastName，当其中任何一个发生改变时，get就会执行。

（3）其余情况，数据会有缓存机制，也就是第一次计算完毕后会把数据缓存，后面调用的过程中直接从缓存中读取数据。

当然，计算属性中，有get，就有set。但是不是必须，一般你的计算属性主动修改时才会写set ，比如

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue测试</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"> </br> 名：<input type="text" v-model="lastName"> </br> 姓名：<span> {{fullName}} </span> </div> <script type="text/javascript"> new Vue({ el:'#root', data:{ firstName:"张", lastName:"三" }, computed:{ fullName:{ //get的作用，当有人读取fullName时，get就会被调用，且返回值就作为fullName的值 get(){ console.log("get被调用了") return this.firstName + this.lastName }, set(value){ console.log(value) //传入的参数假设是value //下面这个地方可以把拿到的值再赋值给data里面 this.firstName =value } } }, methods:{ } }) </script> </body> </html>

set是一个连锁反应。

2.计算属性的简写

计算属性代码写起来比较长，可以有简写形式，简写形式只有get，没有set。类似于我们写函数。如果去掉set后，我们可以把上面的fullName写成下面两种形式。

fullname:function(){ console.log("哈哈哈哈") return this.firstName+this.lastName } //或者再精简点 fullname(){ console.log("哈哈哈哈") return this.firstName+this.lastName }

标签：vue,firstName,get,lastName,js,fullName,属性
来源： https://www.cnblogs.com/longkui-site/p/16650066.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue(vue.js) 计算属性

0.案例

1.计算属性

2.计算属性的简写