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

vue.js

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

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

サンプル

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

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

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形式で定義するようです。

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

デフォルト

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

入力された値が表示

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

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

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

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

すごい……