vue计算属性computed(简单使用)
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>计算属性computed
</title
>
<script src
="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script
>
</head
>
<body
>
<div id
="app">
<h2
>{{ message
}}</h2
>
<br
/>
<input v
-model
="message">
<br
/>
<input v
-model
="a">
<br
/>
<input v
-model
="obj.age">
<br
/>
<input v
-model
="sum">
</div
>
</body
>
<script
>
var app
= new Vue({
el
: '#app',
data
: {
message
: 'Hello Vue!',
a
:1,
obj
:{
name
:'gr',
age
:18
}
},
computed
: {
sum
:function(){
return +this.a
+(+this.obj
.age
)
}
},
})
</script
>
</html
>
效果图：
说明：计算属性可以当data使用，不必在data声明，默认会调用一次，随着里面的值发生改变，会自动计算，调用一次函数
