Vue.js
Beräknade egenskaper

Anmärkningar

Grundläggande exempel

Mall

<div id="example">
  a={{ a }}, b={{ b }}
</div>

JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

Resultat

a=1, b=2

Här har vi förklarat en beräknad egenskap b . Funktionen som vi tillhandahåller kommer att användas som getterfunktion för fastigheten vm.b :

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

vm.b är alltid beroende av vm.a .

Du kan binda data till beräkna egenskaper i mallar precis som en normal egenskap. Vue är medveten om att vm.b beror på vm.a , så det kommer att uppdatera alla bindningar som beror på vm.b när vm.a ändras.

Beräknade egenskaper kontra klocka

mall

<div id="demo">{{fullName}}</div>

se exempel

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

Beräknat exempel

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Beräknade bosättare

Beräknade egenskaper kommer automatiskt att beräknas igen när data som beräkningen beror på ändras. Men om du måste ändra en beräknad egenskap manuellt, låter Vue dig skapa en setter-metod för att göra detta:

Mall (från grundexemplet ovan):

<div id="example">
  a={{ a }}, b={{ b }}
</div>

Javascript:

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    b: {
      // getter
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (newValue) {
        this.a = newValue - 1 
      }
    }
  }

Du kan nu åberopa antingen getter eller setter:

console.log(vm.b)       // -> 2
vm.b = 4                // (setter) 
console.log(vm.b)       // -> 4
console.log(vm.a)       // -> 3

vm.b = 4 kommer att påkalla setteren och ställa detta.a till 3; som förlängning kommer vm.b att utvärdera till 4.

Med hjälp av beräknade inställningar för v-modell

Du kanske behöver en v-model på en datoregenskap. Normalt uppdaterar inte v-modellen det beräknade egendomsvärdet.

Mallen:

<div id="demo">
  <div class='inline-block card'>
    <div :class='{onlineMarker: true, online: status, offline: !status}'></div>  
    <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
  </div>

  <div class='margin-5'>
    <input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
  </div>
</div>

styling:

#demo {
  font-family: Helvetica;
  font-size: 12px;
}
.inline-block > * {
  display: inline-block;
}
.card {
  background: #ddd;
  padding:2px 10px;
  border-radius: 3px;
}
.onlineMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.online {
  background-color: #3C3;
}

.offline {
  background-color: #aaa;
}

.user-state {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.margin-5 {
  margin: 5px;
}

Komponenten:

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            }
        }
    }
})

fiddle Här skulle du se, att klicka på alternativknappen har ingen nytta alls, din status är fortfarande online.

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            },
            set (val) {
                this.statusProxy = val            
            }
        }
    }
})

fiddle Och nu kan du se växlingen hända när kryssrutan är markerad / avmarkerad.