Vue中的计算属性
vue中的数据绑定分为单向数据绑定和双向数据绑定;
单向数据绑定v-bind,使用单向数据绑定时,数据只能从data流向页面。
双向数据绑定v-model，数据不仅能从data中流向页面，也能从页面中流向data。
基于以上基础知识，我们结合一个案例，来学习vue中的计算属性--computed
首先引入代码
<head> <meta charset="UTF-8" /> <title>计算属性</title> <!-- 引入Vue --> <script type="text/javascript" src="./vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id="demo"> 姓:<input type="text" v-model="firstName" /><br /> 名:<input type="text" v-model="lastName" /><br /> 全名: <span></span> </div> </body>
<script type="text/javascript"> //阻止 vue 在启动时生成生产提示。 Vue.config.productionTip = false new Vue({ el: "#demo", data: { firstName: "张", lastName: "三",},
})
这个案例是根据用户提供的姓和名自动生成全名；首先我们不使用计算属性来完成这个案例。
//直接拼接姓和名全名:<span>{{firstName+lastName}}</span>
可以看到,这种做法也是可以的,但是就代码的可读性来讲,并不是很高。并且当我每调用一次它都会重新解析一次。这并不是我们想要的结果。
接下来看看计算属性
computed: { fullName: { get() { return this.firstName + this.lastName }, }, }
通过计算属性computed来对data中的姓和名两个属性进行计算，底层原理也是通过object.defineProperty来进行读取和修改。在计算属性中，我们要计算的就是全名，也就是fullName。在fullName中，通过get函数对属性进行监听，返回值就是我们需要的结果。这里需要注意，和直接拼接不同，这里直接拼接firstName和lastName，是找不到这两个属性的。此时我们需要用到this，这里的this指向就是我们创建的vue实例。
全名:<span>{{fullName}}</span>
由此,我们通过计算属性完成了该需求的代码编写
- 发表于:
- 原文链接：https://page.om.qq.com/page/Oz3TlfTPk3vKoJQD9s9jAbmg0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
