VueJS - obliczone właściwości
Widzieliśmy już metody dla instancji Vue i komponentów. Obliczone właściwości są podobne do metod, ale z pewną różnicą w porównaniu z metodami, które omówimy w tym rozdziale.
Pod koniec tego rozdziału będziemy mogli podjąć decyzję, kiedy używać metod, a kiedy obliczonych właściwości.
Rozważmy obliczone właściwości na przykładzie.
Przykład
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>vue_computeprops.js
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})Tutaj stworzyliśmy .htmlplik z imieniem i nazwiskiem. Imię i Nazwisko to pole tekstowe powiązane z właściwościami imię i nazwisko.
Wywołujemy metodę obliczeniową getfullname, która zwraca wpisane imię i nazwisko.
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}Kiedy wpisujemy w pole tekstowe, funkcja zwraca to samo, gdy właściwości firstname lub lastname ulegają zmianie. Dlatego z pomocą computed nie musimy robić nic konkretnego, jak na przykład zapamiętywanie wywołania funkcji. Po wyliczeniu jest wywoływany samoczynnie, ponieważ właściwości użyte w środku ulegają zmianie, tj. Imię i nazwisko.
To samo jest wyświetlane w następującej przeglądarce. Wpisz pole tekstowe, a to samo zostanie zaktualizowane za pomocą obliczonej funkcji.
Teraz spróbujmy zrozumieć różnicę między metodą a obliczoną właściwością. Obie są obiektami. Wewnątrz są zdefiniowane funkcje, które zwracają wartość.
W przypadku metody nazywamy ją funkcją, a obliczoną jako właściwość. Korzystając z poniższego przykładu, pozwól nam zrozumieć różnicę między metodą a obliczoną właściwością.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>W powyższym kodzie stworzyliśmy metodę o nazwie getrandomno1 i obliczona właściwość z funkcją getrandomno. Oba zwracają liczby losowe za pomocą funkcji Math.random ().
Jest wyświetlany w przeglądarce, jak pokazano poniżej. Metoda i obliczona właściwość są wywoływane wiele razy, aby pokazać różnicę.
Jeśli spojrzymy na powyższe wartości, zobaczymy, że liczby losowe zwrócone z obliczonej właściwości pozostają takie same niezależnie od tego, ile razy są wywoływane. Oznacza to, że za każdym razem, gdy jest wywoływana, ostatnia wartość jest aktualizowana dla wszystkich. Podczas gdy w przypadku metody jest to funkcja, dlatego za każdym razem, gdy jest wywoływana, zwraca inną wartość.
Pobierz / ustaw w obliczonych właściwościach
W tej sekcji nauczymy się na przykładzie funkcji get / set w obliczanych właściwościach.
Przykład
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>Zdefiniowaliśmy jedno pole wejściowe, do którego jest przypisane fullname, która jest obliczoną właściwością. Zwraca funkcję o nazwieget, która podaje pełne imię i nazwisko, czyli imię i nazwisko. Ponadto wyświetliliśmy imię i nazwisko jako -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>Sprawdźmy to samo w przeglądarce.
Teraz, jeśli zmienimy nazwę w polu tekstowym, zobaczymy, że to samo nie jest odzwierciedlone w nazwie wyświetlanej na poniższym zrzucie ekranu.
Dodajmy funkcję ustawiającą do obliczonej właściwości fullname.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>Dodaliśmy funkcję set do właściwości obliczonej fullname.
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}Ma nazwę jako parametr, która jest niczym innym jak pełną nazwą w polu tekstowym. Później jest dzielony na spację, a imię i nazwisko są aktualizowane. Teraz, gdy uruchomimy kod i wyedytujemy pole tekstowe, to samo zostanie wyświetlone w przeglądarce. Imię i nazwisko zostaną zaktualizowane z powodu ustawionej funkcji. Funkcja get zwraca imię i nazwisko, podczas gdy funkcja set aktualizuje je, jeśli cokolwiek jest edytowane.
Teraz wszystko, co jest wpisane w polu tekstowym, pasuje do tego, co jest wyświetlane, jak widać na powyższym zrzucie ekranu.