豚野郎です。
今度は算出プロパティについて書いていきます。
(LaravelはできるからそろそろVueもできるようにしないと・・・・・)
1. computed(算出プロパティ)
computedって何？ということで内容を調べてみましたが、
自分の言葉で、一言で説明できませんでした。
(理解不足ですみません。)
そのため、今回は動きの検証として書いていきます。
ググってみると「複雑な計算などに使える」という情報が結構出てきます。
2. 動き
実際の動きをconsole.log()で見ていきます。
実際に見ていきましょう。
以下の例は、画面に4と表示されます。
js/main.js
(function() {
'use strict';
let vm = new Vue({
el: '#app',
data: {
item: 1,
},
computed: {
remaining() {
console.log('テスト');
var result = this.item * 4
return result;
}
}
});
})();
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="app" class="container">
<span class="info">{{ remaining }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<span class="info">{{ remaining }}</span>を記載されている時は、
js/main.jsのremaining: function () {処理}の処理が通りました。
記載がない時は処理を通りませんでした。
これで、画面表示時に{{ 算出プロパティ名 }}等の記載がある時に
対象の算出プロパティの処理が走ることがわかりました。
補足ですがfunctionを省略できるか試したところ、省略しても処理が走りました。
js/main.js
computed: {
remaining() {
console.log('テスト');
var result = this.item * 4
return result;
}
}
3. 最後に
内容が薄いですが、ここまでにします。
少しずつ理解が深められたらいいなと思います。