lisz-works

プログラミングと興味を貴方に

vue v-modelと{{ }}でデータバインディング!

【スポンサーリンク】

vue.js

vueのmodelと{{ }}でデータバインディングします!

なんかvue使ってるぞ!って感じになってきました!

サンプル

作成したサンプルは、GitHubにアップしています。

github.com

v-modelでデータのバインディング

「v-model」と「{{ }}」を使うことで、変数のデータをバインディング(割当)することができます。

templateの作成

template内にデータバインディングをする要素を作っていきます。

<template>
  <div id="test">
    <input type="type" v-model="testmsg">
    <p>testmsgの値→ {{ testmsg }}</p>
  </div>
</template>

「v-model="testmsg"」は、このタグ、つまり入力フォームの値を「testmsg」という変数と紐付けるよ!という宣言をしています。

「{{ testmsg }}」は、「testmsg」という変数の値をここに出力するよ!という宣言をしています。

変数の作成

script内にデータバインディングした変数を作っていきます。

<script>
export default {
  name: "Test",
  data() {
    return {
      testmsg: "",
    }
  }
}
</script>

この

  data() {
    return {
      testmsg: "",
    }
  }

の部分ですね。

vueでは使用する変数はこんな感じで、data()のreturnとしてJSON形式で定義するようです。

実行する

ここまでできたら、試しに動かしてみましょう!

デフォルト

こんな感じで表示されるので、テキストボックスに値を入力してみると……

入力された値が表示

入力された値が表示されていきます!

参考

コチラを参考にしました。ありがとうございました!

qiita.com

qiita.com

あとがき

vueのディレクティブ「v-model」による、データバインディングについてでした!

こんな簡単にデータの取得と反映ができるんですね。

すごい……

www.lisz-works.com