Vue.js
Obliczone właściwości

Uwagi

Podstawowy przykład

Szablon

<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
    }
  }
})

Wynik

a=1, b=2

Tutaj zadeklarowaliśmy obliczoną właściwość b . Podana przez nas funkcja będzie używana jako funkcja pobierająca dla właściwości vm.b :

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

Wartość vm.b jest zawsze zależna od wartości vm.a

Możesz powiązać dane z obliczonymi właściwościami w szablonach, tak jak normalna właściwość. Vue zdaje sobie sprawę, że vm.b zależy od vm.a , więc zaktualizuje wszelkie powiązania zależne od vm.b gdy zmieni się vm.a

Obliczone właściwości a zegarek

szablon

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

patrz przykład

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
})

Obliczony przykład

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

Settery obliczone

Obliczone właściwości zostaną automatycznie przeliczone za każdym razem, gdy zmienią się dane, od których zależy obliczenie. Jeśli jednak musisz ręcznie zmienić obliczoną właściwość, Vue umożliwia utworzenie metody ustawiającej, aby to zrobić:

Szablon (z podstawowego przykładu powyżej):

<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 
      }
    }
  }

Możesz teraz wywoływać gettera lub settera:

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

vm.b = 4 wywoła setera i ustawi to. a na 3; przez rozszerzenie vm.b będzie oceniać na 4.

Korzystanie z zestawów obliczeniowych dla modelu v

Może być potrzebny v-model dla obliczonej właściwości. Zwykle model v nie aktualizuje obliczonej wartości właściwości.

Szablon:

<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>

Stylizacja:

#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;
}

Składnik:

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

skrzypce Tutaj zobaczysz, że kliknięcie przycisku opcji nie ma żadnego zastosowania, twój status jest nadal 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            
            }
        }
    }
})

skrzypce A teraz możesz zobaczyć, jak to się dzieje, gdy pole wyboru jest zaznaczone / niezaznaczone.