Vue——计算属性

Vue 专栏收录该内容
3 篇文章 0 订阅

Vue——计算属性


1. 计算属性——computed

  1. computed 与 methods 评级
  2. 在 computed 中,可以定义一些 属性,这些属性叫做计算属性,计算属性的本质就是一个方法,只不过,在使用 这些计算属性的时候,是把他们的 名称 ,直接把计算属性当作方法当做属性 来使用;并不会去调用
  3. 计算属性在引用时, 一定 不要加 ()去调用,直接当做普通 属性去使用就行
  4. 只要 计算属性定义 function 内部 ,所用 到的任何data中 的 数据发生变化,就会立即重新计算 这个计算属性的 值
  5. 计算属性的求值结果会被缓存起来,方便下次直接使用;如果 计算属性 方法中,所有数据 都没有发生 新的变化,则,不会 重新对 计算属性求值

2. 计算属性简单使用

<div id="app">
     <h2>{{fullName}}</h2>
 </div>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             firstname: 'kobi',
             lastname: 'James'
         },
         computed: {
             fullName: function () {
                 return this.firstname + ' ' + this.lastname
             }
         }
     })
 </script>

3. 计算属性复杂应用

  <div id="app">
      总价格为:{{totalPrice}}
  </div>
  <script>
      const app = new Vue({
          el: '#app',
          data: {
              books: [
                  { id: 1, name: '光年之外', price: 4 },
                  { id: 2, name: '花海', price: 5 },
                  { id: 3, name: '写给黄淮', price: 6 }
              ]
          },
          computed: {
              totalPrice: function () {
                  let res = 0;
                  for (let i = 0; i < this.books.length; i++) {
                      res += this.books[i].price
                  }
                  return res
              }
          }
      })
  </script>

4. watch 、computed 、methods 的对比

  1. computed :computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算;主要当做属性来使用
  2. methods :methods 方法表示一个具体操作,主要书写业务逻辑
  3. watch :watch 一个对象,键 是需要观察的表达式,值是对应的回调函数;主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可看做是computed 和 methods 的结合体;

5. 计算属性原理 setter 和 getter

  1. 计算 属性 原本 写法
  2. 属性值 发生 改变 时调用 set 方法 (一般不用 )
 <div id="app">
     <h2>{{fullName}}</h2>
     <h2>{{fullName}}</h2>
 </div>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             firstname: 'kobi',
             lastname: 'James'
         },
         computed: {
             fullName: {
                 set: function (newvalue) {
                     let names = newvalue.split(' ')
                     this.firstname = names[0]
                     this.lastname = names[1]
                 },
                 get: function () {
                     return this.firstname + ' ' + this.lastname
                 }
             }
         }
     })
 </script>
  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值