- web design -

blog

こまけぇこたぁいいんだよ ─ のんびりVue.js超入門［第5回：v-model］

JavaScript

posted : 2018.12.02

vue_article_5

 

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。

こまのんVue（※こま（けぇこたぁいいんだよ）のん（びり）Vue（.js超入門））第5回です。

今回は双方向データバインディングを実現するv-modelディレクティブを使ってみましょー。

 

v-modelディレクティブでデータの更新・反映を簡単に行う

まずはサンプルを。

サンプルはインプットエリアにセリフを入力すると、瞬時にもぎ語（もぎ＝もぎたん＝我が家の飼いうさぎ）に変換されると言う（しょうもない）アプリです。

 

 

JS（該当部分のみ抜粋）

var vueTest = new Vue({
　el : "#vueTest",
　data : {
　　talking : "",
　}
})

HTML（該当部分のみ抜粋）

<input type="text" placeholder="好きなセリフを入れてみよう！" v-model='talking'>
<span>{{talking+"もぎぃ！"}}</span>

 

なんて事のない動作だと思いますが、実はしれっと二つのプロセスが瞬時に実行されています。

  1. 入力した文字列でdata内talkingプロパティを更新
  2. 更新されたデータを{{talking}}部分に反映

フォーム入力値の更新と反映を双方向的に行えるのが、v-modelディレクティブな訳ですね。

これは結構便利かも。

 

v-modelを使わない双方向データバインディング

v-modelを使わなくとも双方向データバインディングは可能です。

input部分を、

<input
　v-bind:value="talking"//①
　v-on:input="talking = $event.target.value"//②
>

と書き換えることでv-model同様の機能を実装できる模様。

ざっくり言うと①input要素の値をデータと紐づけた上で、②input入力値でtalkingプロパティ値を更新させる感じでしょうか。

※ちなみに今回のサンプルでは①は無くても問題ないです。

 

まあでも記述量増えるだけなので、何か理由がない限りはv-modelの恩恵を受ければいいんじゃないですかね（適当

 

その他の実装 / ついでにv-ifなんかも使ってみる

今回のサンプルでは前回の記事で触れたv-ifやclassのbindなんかも使ってみてます。

やや冗長なのはご勘弁。

 

HTML（抜粋）

<div v-bind:class="{taboo:taboo.indexOf(talking) >= 0}">
　<span v-if="talking&&taboo.indexOf(talking) == -1">{{talking+"もぎぃ！"}}</span>
　<span v-if="taboo.indexOf(talking) >= 0">{{talking+"？そんなことを言う人は許しません！"}}</span>
</div>

 

ここでやっているのは簡単ですが以下のような事です。

JSのtabooプロパティ内の単語が入力値と一致するかを調べて、

  1. 吹き出しエリアdivのCSS（tabooクラス）を切替
  2. 表示文字列を出し分け

と言う感じ。

v-if="talking&&taboo.indexOf(talking) == -1"
v-if="taboo.indexOf(talking) >= 0"

一行目はtalkingに文字が1文字以上存在して、尚且つtaboo配列中の文字列と入力値がマッチしなければ（＝indexOfの返り値が-1）、と言う条件。

二行目は入力値がtaboo配列中の文字列とマッチしたら、と言う条件です。

 

試しにサンプルでバカとかアホとか打ってみてください。

もぎたんが怒るハズ。

ちなみにもう一回言っておくと、もぎたんとはうちのアイドルである飼いうさぎの名前です。

大事な事だから二回言います。

 

ちなみにこれ、文字列検索は完全一致なんでバカアホと連続で打つと普通にもぎ語に変換されます（苦

なんとも中途半端な実装！

 

それではまた！

 

What's new?

- the latest post -

Awwwards Honorable Mention

blog

posted on

Awwwardsでサイト「HOPPY DAYS」が入賞しました

 check