- IT Tips
- Ruby / Rails以外の開発一般
READ MORE
引き続きVue.jsの双方向データバインディングのサンプルです。
前回はHTMLで{{ sum + tax }}
と書きましたが、今回のように{{140 - b.length}}
というもう少し複雑な書き方も可能です。表示にしか使わない式をこのように書けるのはありがたいことです。
<div class='panel-footer'>あと {{140 - b.length}} 文字
</div>
Vue.jsのHTMLテンプレート構文{{ }}
内に書けるのは単一の式のみに制限されています(公式ドキュメント)。
したがって文やif
などの条件分岐は書けません。ただし三項演算子は書けます。
{{ var a = 1 }} <!-- 不可: 文は書けない -->
{{ if (ok) { return message } }} <!-- 不可: ifなどの制御フローも書けない -->
{{ ok ? 'YES' : 'NO' }} <!-- OK: 三項演算子は書ける -->
trim
trim
を使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。
<textarea class='form-control' v-model.trim='b'></textarea>
ウォッチャー(watch:
)を使うと簡単です(使いすぎに注意)。
watch: {
b: function(v) { if (v < 0) { this.b = 0 } },
d: function(v) { if (v < 0) { this.d = 0 } },
},
HTML5のmax属性やmin属性で制限する方法もあります。