前回の「jQueryとVue.jsの比較(入力バインディング編)」に続いて、今回は算出プロパティ編です。
Vue.jsのドキュメントは以下にあります。
Vue.jsではv-if
やv-for
などテンプレート内に計算式を持つことができます。
ただ持ちすぎるとテンプレートのメンテナンス性が低下するので、算出プロパティで外部に出して処理に名前をつけるようにします。この算出プロパティはテンプレート上、変数のように扱うことができます。
算出プロパティ
今回は以下のようなリストで選択された値に合わせて<p>
タグ内の値を変更するようにしてみます。
画面
今回の前提条件
リストの選択肢は配列で定義します。
[
{
name: "綾波レイ",
eva: "零号機",
key: 0
},
{
name: "碇シンジ",
eva: "初号機",
key: 1
},
{
name: "惣流アスカラングレー",
eva: "弐号機",
key: 2
}
]
jQueryの場合
HTMLのBODY部分は以下の通りです。
<div class="container">
<div class="mt-5"></div>
<div class="card">
<div class="card-header">
jQueryの場合
</div>
<div class="card-body">
<div class="form-group">
<select id="select"></select>
</div>
<h5 class="card-title">搭乗機</h5>
<p class="card-text" id="result1"></p>
</div>
</div>
</div>
<select id="select">
の部分に選択肢を追加します。
そして、初期選択状態は{name: "綾波レイ",eva: "零号機",key: 0}
を選ばせた状態にします。
初期値を<p>
タグに表示させたいので、このあと出てくる#select
のchange
イベントを発火させてます。
const eva = [{
name: "綾波レイ",
eva: "零号機",
key: 0
},
{
name: "碇シンジ",
eva: "初号機",
key: 1
},
{
name: "惣流アスカラングレー",
eva: "弐号機",
key: 2
}
];
$(function () {
// リストの追加
for (item in eva) {
$("#select").append($("<option>").val(eva[item].key).text(eva[item].name));
}
//初期値の設定
$('#select').val(0);
//イベントトリガーの強制発火
$('#select').trigger('change');
});
リストの選択状態が変更されたのをトリガーに<p>
タグ内の値を変更したいので
$("#select").change(function () {
var target = eva.filter(el => el.key === Number($(this).val()))[0].eva;
$("#result1").html(target);
});
上記の様に、選択された値を取得し配列から対象の要素をfilter
で抜き出し、
eva
の要素の値を <p id="result1">
に埋め込んでます。
結果
以下の様にリストの選択で誰が選ばれたかによって、搭乗機が変更されるようになりました。
では、今回もVue.jsで同じ画面を作ってみたいと思います。
Vue.jsの場合
HTMLのBODY部分は以下の通りです。
<div class="container">
<div class="mt-5"></div>
<div class="card" id="vue">
<div class="card-header">
Vue.jsの場合
</div>
<div class="card-body">
<div class="form-group">
<select v-model="selected">
<option v-for="item in eva" :value="item.key">{{ item.name }}</option>
</select>
</div>
<h5 class="card-title">搭乗機</h5>
<p class="card-text" id="result2">{{ getEva }}</p>
</div>
</div>
</div>
-
<select v-model="selected">
と前回同様v-model
で選択された値を双方向データバインディングとして定義 -
<option>
タグはv-for="item in eva"
とdata
の値を回します- 回された際に中にある
item.key
を<option>
のvalue
に定義 - 選択肢の表示用に
{{ item.name }}
と定義
- 回された際に中にある
-
<p>
タグ内に表示させる結果は{{ getEva }}
で定義
では、javascipt側です。
new Vue({
el: "#vue",
data: {
selected: 0,
eva: [{
name: "綾波レイ",
eva: "零号機",
key: 0
},
{
name: "碇シンジ",
eva: "初号機",
key: 1
},
{
name: "惣流アスカラングレー",
eva: "弐号機",
key: 2
}
]
},
computed: {
getEva: function () {
return this.eva.filter(el => el.key === this.selected)[0].eva;
}
}
});
-
data
にてselected: 0
と初期値を固定で定義してます - 前回出てこなかった
computed
がありますが、これが 算出プロパティ です-
getEva
と画面に埋め込んでましたが算出プロパティ側で定義されてるものでした - 中身は
data
のselected
と一致するeva
の配列のkey
を見つけてeva
を返却です
-
結果
同じ動きのものが無事できました。
おまけ
算出プロパティは個人的には中身に計算式を定義しておいて、dataなど周りで定義されてる値が変更されると同期的に計算式通りに値を書き換えてくれる。周りが変われば私も合わせますぞって素直な子のイメージ。
例えば消費税を計算するときの計算式は1.1掛けすればいいのでjavascriptだと
Math.floor(入力された金額 * 1.1)
と書けて、それを算出プロパティに定義しておけばよいので
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue">
<p>税抜金額</p>
<input type="number" v-model="excluded">
<p>税込み価格</p>
<p id="result2">{{ getTax }}</p>
</div>
<script>
new Vue({
el: "#vue",
data: {
excluded: 0
},
computed: {
getTax: function () {
return Math.floor(this.excluded * 1.1);
}
}
});
</script>
</body>
</html>
今回はここまでです。