<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>算出プロパティ</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputCharactors">
<p v-if="inputNumber < 10">必要な文字数は{{ needNumbers }}文字です</p>
<p v-else style="color :rgb(255, 30, 30);">10文字以上入力されています</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
inputCharactors: ''
},
computed:{
inputNumber : function (){
//文字の数を取得する
return this.inputCharactors.length;
},
needNumbers : function(){
//10文字までに必要な残りの文字数を表示する
return 10 - this.inputNumber;
}
}
})
</script>
</body>
</html>
conputedは値を監視するときに、ifバインドと合わせるいい感じになるっぽい。
関数として呼び出す必要がなくて、常に働いてくれてすごいです。
参考
https://reffect.co.jp/vue/vue-js-basic
本当にこのサイトはわかりやすい