计算属性
模板内可以直接使用表达式等等,但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重且难以维护,因此引入计算属性。
<div id="app">{
{
message.split('').reverse().join('') }}</div> <!-- 模版内的表达式复杂不利于维护-->
计算属性
指的是通过一系列运算之后,最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods方法使用。计算属性本质上就是一个function函数,它可以实时监听data中数据的变化,并return一个计算后的新值
,供组件渲染DOM时使用。
<div id="app">
<p>Original message: "{
{ message }}"</p> <!-- 结果:Original message: "Hello" -->
<p>Computed reversed message: "{
{ reversedMessage }}"</p> <!-- 结果:Computed reversed message: "olleH"-->
</div>
const app = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter 的简写方式
reversedMessage: function () {
// `this` 指向 app 实例
return this.message.split('').reverse().join('')
}
}
})
注意:1、在调用计算属性中的方法时,不需要调用其方法(如上例中的reverseMessage()),只需使用其名字(reverseMessage)即 可。因为它(reverseMessage)是个属性。
2、计算属性侧重于得到一个计算的结果,因此计算属性中必须要有return返回值!
计算属性 vs 方法
可能就会有小伙伴会有疑惑了:上述使用计算属性来解决的问题用methods也可以解决呀,为什么还要引入计算属性呢?
首先通过一段代码可以看看方法和计算属性之间的区别:
<div id="app">
<input type="text" v-model.number="message">
<!-- 使用计算属性 -->
<p>{
{
message}}的平方是:{
{
pow}}</p>
<p>{
{
message}}的平方是:{