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>
由此,我们通过计算属性完成了该需求的代码编写
领取专属 10元无门槛券
私享最新 技术干货