BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

vueディレクティブv-bindの使用と注意点

2022-01-13 13:17:16

1. v-bind：要素の属性に何らかのデータをバインドすることができる 

 <div id="app">

    <p v-bind:title="message" v-bind:id="pId">I am p tag</p>

 </div>

<script src=". /js/vue.js"></script>

          <script>

            let vm = new Vue({

                el:"#app",

                data:{

                    message:"I am the title value of the p tag",

                    pId:"This is the random id given"

                }

            })

出力されます。

2.v-bind：と略すことができる。コロンで直接記述することをお勧めします 

<div id="app">

    <p :title="message" :id="pId">I am p tag</p>

 </div>

<script src=". /js/vue.js"></script>

          <script>

            let vm = new Vue({

                el:"#app",

                data:{

                    message:"I am the title value of the p tag",

                    pId:"This is the random id given"

                }

            })

出力は上記と同じです 結果は上記と同じです

3. v-bind：コマンド式のスプライシング、その

式をスプライスする場合、スプライスされた文字列は引用符で囲む必要があり、そうしないと変数としてパースされることになります

引用符なし

エラーを報告する :[Vueの警告]。プロパティまたはメソッド "これは追加された id" はインスタンスで定義されていませんが、レンダリング中に参照されます。このプロパティは、データオプションで、またはクラスベースのコンポーネントのために、プロパティを初期化することによって、reactiveであることを確認してください。

引用で 

<p title="200" :title="message" :id="pId+'This is the additional id'">I am the p tag</p>

出力結果です。

この時点でこの記事の v-bind v-bindの使い方については、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します