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は、プロパティfirstnameとlastnameを使用してバインドされるテキストボックスです。
入力された名と姓を返す計算メソッドgetfullnameを呼び出しています。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}テキストボックスに入力すると、プロパティのfirstnameまたはlastnameが変更されたときに、同じことが関数によって返されます。したがって、calculatedの助けを借りて、関数を呼び出すことを覚えているなど、特定のことをする必要はありません。計算では、内部で使用されるプロパティ、つまり名と姓が変更されると、それ自体が呼び出されます。
次のブラウザでも同じことが表示されます。テキストボックスに入力すると、計算された関数を使用して同じものが更新されます。
それでは、メソッドと計算されたプロパティの違いを理解してみましょう。どちらもオブジェクトです。内部には、値を返す関数が定義されています。
メソッドの場合、それを関数として呼び出し、プロパティとして計算します。次の例を使用して、メソッドと計算されたプロパティの違いを理解しましょう。
<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（）を使用して乱数を返しています。
以下のようにブラウザに表示されます。メソッドと計算されたプロパティは、違いを示すために何度も呼び出されます。
上記の値を見ると、計算されたプロパティから返される乱数は、呼び出された回数に関係なく同じままであることがわかります。これは、呼び出されるたびに、すべての最後の値が更新されることを意味します。メソッドの場合、それは関数であるため、呼び出されるたびに異なる値を返します。
計算されたプロパティで取得/設定
このセクションでは、例を使用して、計算されたプロパティのget / set関数について学習します。
例
<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>にバインドされている1つの入力ボックスを定義しました fullname、これは計算されたプロパティです。と呼ばれる関数を返しますget、フルネーム、つまり名と姓を指定します。また、名と姓を-として表示しました
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>ブラウザで同じことを確認しましょう。
ここで、テキストボックスの名前を変更すると、次のスクリーンショットに表示されている名前に同じ名前が反映されていないことがわかります。
フルネームの計算プロパティにsetter関数を追加しましょう。
<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>フルネームの計算プロパティに集合関数を追加しました。
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関数は何かが編集されている場合はそれを更新します。
これで、テキストボックスに入力されたものはすべて、上のスクリーンショットに表示されているものと一致します。