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