Vue中的计算属性理解,简单易懂

发布于:2024-08-20 ⋅ 阅读:(160) ⋅ 点赞:(0)

什么是Vue中的计算属性

计算属性故名思意,是具有计算表达式的一个属性,或者说是一个值。
在Vue中,我们有时会在模板中对数据进行一些逻辑处理。这个时候就非常的不好看,也难以维护。比如像下面的代码:

<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>

这里我们像在渲染message时,将其反转,并不是简单的将数据渲染上去。
又或者是这种情况

<span>{{ books.length > 0 ? 'Yes' : 'No' }}</span>

这里我们不是想直接渲染数据,而是将根据数据,渲染其他结果选项。
类似这类,用计算表达式表示结果的情况,Vue用计算属性来处理替换,提高代码的可读性和维护性

Vue中如何使用计算属性

例如,我们想要获取到一串字符串的翻转字符串,我们可以利用计算属性来做
原来基础的写法:

<div id=“app”>
{{ message.split('').reverse().join('') }}
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }

计算属性写法:

<div id="app">
   <!-- 计算属性的值可以像data数据一样,直接被使用 --> 
  {{ reversedMsg}}
</div>
const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMsg: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

怎么样,是不是很好理解,值得注意的是,其中,计算属性 reversedMsg,是一个方法,在message数据改变时,reversedMsg会自动调用,从而同步对页面上的数据进行更新

深入计算属性
另外,计算属性除了写成一个函数之外,还可以写成一个对象,对象内有两个属性,getter&setter,这两个属性皆为函数,写法如下:

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.message.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

当我们去获取某一个计算属性时,就会执行getter函数,
setter函数是可选的,setter函数在给计算属性重新赋值时会执行。 参数:要被重新设置的值。


网站公告

今日签到

点亮在社区的每一天
去签到