概要
v-ifの使用方法を記した備忘録です。
v-ifとは
HTML要素を条件分岐させる事ができるディレクティブの事。
文法
文法.html
<タグ v-if 条件></タグ>
<タグ v-if-else 条件></タグ>
<タグ v-else 条件></タグ>
v-ifを使ってみる
post_com.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<label><input v-model="myText"></label>
<!--0から140文字の間の入力があった場合の処理-->
<p v-if="0 <= myText.length && myText.length <=140">
{{myTextLen}}
</p>
<!--140文字以上が入力された場合の処理-->
<p v-else-if="141 <= myText.length">
<font color="red">
{{myTextLen}}文字超過
</font>
</p>
<p v-else>
</p>
</div>
<script src="./post_com.js"></script>
</body>
</html>
post_com.js
const app = new Vue({
el: "#app",
data: {
myText:""
},
computed:{
//文字数の絶対値を140からマイナスカウントさせる処理
myTextLen: function(){
return Math.abs(this.myText.length - 140);
}
}
})
解説
上記PGMはフォームへの入力可能文字残数（ここでは140文字）を表示させるプログラム。
v-modelでデータを繋ぎcomputedで計算処理を外出しさせています。