Alle apps har datamedlemmer som brukes i funksjoner for å lage nytt innhold.

methods

Her følger et eksempel hvor to tall skal legges sammen:

Tall 1: <input type="text" v-model:value="tall1">
Tall 2: <input type="text" v-model:value="tall2">
Svar: <input v-bind:value="svar()">

Det er to felt for å taste inn tall, og et felt for å vise svaret.

Funksjonen svar tar seg av arbeidet:

var app = new Vue({
  el: "#app",
  data: {
    tall1: 0,
    tall2: 0
  },
  methods: {
    svar: function() {
      return parseFloat(this.tall1) + parseFloat(this.tall2);
    }
  }
});

computed

Alternativt kan man gjøre som følger:

var app = new Vue({
  el: "#app",
  data: {
    tall1: 0,
    tall2: 0
  },
  methods: {
  },
  computed: {
    svar: function() {
      return parseFloat(this.tall1) + parseFloat(this.tall2);
    }
  }
});

Her er svar flyttet til computed i stedet for, dette muliggjør følgende:

Tall 1: <input type="text" v-model:value="tall1">
Tall 2: <input type="text" v-model:value="tall2">
Svar: <input v-bind:value="svar">

Her henvises det til svar som om dette er et datamedlem. Dette blir litt mer elegant.

TBC