More than 3 years have passed since last update.

【Vue.js】 v-bindについて

Last updated at 2021-10-10Posted at 2021-10-10

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回はv-bindについてアウトプットしていきます！

V-bindとは

v-baindとは要素に含まれる属性を動的に設定・変更することが出来る設定方法です。
オプションに指定したデータを、データバインディングすることでテキストが表示されます。

データバインディングとはデータと描画を同期する仕組みのことです。

#書き方

基本的な書き方は以下のようになります。

<div id ="app">
 <input type ="text" v-bind:value="message">
</div>

Vue.js

var app = new Vue({
    el:'#app',
    data:{
        message:'Hello vue.js!'
    }
})

このように、inputのvalue属性にmessageプロパティをバインドすることで、上記のようにinputの入力欄にHello vue.js! と表示することができます。
※属性にマスタッシュ構文は使用できません

#まとめ
属性へのデータバインディングでは、
❌　マスタッシュ構文 {{ 〇〇〇〇〇〇 }}　
ではなく、
⭕️　v-bind:value="〇〇〇〇〇〇"
を使用しましょう！

#最後に
今回はv-bindについてアウトプットしました。
もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！