<div id="app">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>全名:{{fullName}}</p>
<p>全名:{{fullName}}</p>
<p>全名:{{fullName}}</p>
</div>
<script>
// 计算属性是根据data中已有的属性,计算得到一个新的属性
var vm = new Vue({
el: '#app',
data: {
firstName: '李',
lastName: '白'
},
// 定义计算属性在computed属性中
computed: {
// 这个属性中写函数,但是这个函数名字非常特殊,它可以作为一个属性直接使用
// 计算属性依赖缓存,当页面多次使用同一个计算属性的时候,它会将第一次计算出来的结果缓存起来,后续直接调用第一次的结果就行了,而不必再走计算逻辑
fullName() {
console.log('通过计算属性实现');
// 必须有return, 但这里面不能处理异步操作
// setTimeout(() => {
// return this.firstName + this.lastName
// }, timeout);
return this.firstName + this.lastName
}
}
})
</script>
vue计算属性的简单使用
最新推荐文章于 2024-08-29 21:48:39 发布