VueJS - вычисляемые свойства
Мы уже видели методы для экземпляра Vue и для компонентов. Вычисляемые свойства похожи на методы, но с некоторыми отличиями от методов, которые мы обсудим в этой главе.
В конце этой главы мы сможем принять решение о том, когда использовать методы, а когда - вычисляемые свойства.
Давайте разберемся с вычисляемыми свойствами на примере.
пример
<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;
}
}
})Здесь мы создали .htmlфайл с именем и фамилией. Имя и Фамилия - это текстовое поле, которое связано с использованием свойств firstname и lastname.
Мы вызываем вычисляемый метод getfullname, который возвращает введенное имя и фамилию.
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}Когда мы вводим текст в текстовое поле, то же самое возвращает функция при изменении свойств firstname или lastname. Таким образом, с помощью computed нам не нужно делать ничего конкретного, например, не забывать вызывать функцию. При вычислении он вызывается сам по себе, поскольку свойства, используемые внутри, изменяются, то есть имя и фамилия.
То же самое отображается в следующем браузере. Введите текстовое поле, и то же самое будет обновлено с использованием вычисленной функции.
Теперь давайте попробуем понять разницу между методом и вычисляемым свойством. Оба объекта. Внутри определены функции, возвращающие значение.
В случае метода мы вызываем его как функцию, а для вычисления - как свойство. Используя следующий пример, давайте поймем разницу между методом и вычисляемым свойством.
<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>В приведенном выше коде мы создали метод под названием getrandomno1 и вычисляемое свойство с функцией getrandomno. Оба возвращают случайные числа с помощью Math.random ().
Он отображается в браузере, как показано ниже. Метод и вычисляемое свойство вызываются много раз, чтобы показать разницу.
Если мы посмотрим на значения выше, мы увидим, что случайные числа, возвращаемые вычисляемым свойством, остаются неизменными независимо от того, сколько раз оно вызывается. Это означает, что каждый раз, когда он вызывается, последнее значение обновляется для всех. В то время как для метода это функция, следовательно, каждый раз, когда он вызывается, он возвращает другое значение.
Получить / установить в вычисленных свойствах
В этом разделе мы узнаем о функциях получения / установки в вычисляемых свойствах на примере.
пример
<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>Мы определили одно поле ввода, которое привязано к fullname, которое является вычисляемым свойством. Он возвращает функцию с именемget, который дает полное имя, то есть имя и фамилию. Кроме того, мы отобразили имя и фамилию как -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>Проверим то же самое в браузере.
Теперь, если мы изменим имя в текстовом поле, мы увидим, что то же самое не отражается в имени, отображаемом на следующем снимке экрана.
Давайте добавим функцию установки в вычисляемое свойство 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>Мы добавили функцию set в вычисляемое свойство 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]
}
}
}В качестве параметра у него есть имя, которое представляет собой не что иное, как полное имя в текстовом поле. Позже он разделяется на пробелы, а имя и фамилия обновляются. Теперь, когда мы запускаем код и редактируем текстовое поле, то же самое будет отображаться в браузере. Имя и фамилия будут обновлены из-за установленной функции. Функция get возвращает имя и фамилию, а функция set обновляет их, если что-либо редактируется.
Теперь все, что вводится в текстовое поле, совпадает с тем, что отображается на скриншоте выше.