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

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

1. v-bind: 要素の属性にデータをバインドできる

 <div id="アプリ">

    <p v-bind:title="message" v-bind:id="pId">私はpタグです</p>

 </div>

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

          <スクリプト>

            vm = new Vue({

                el:"#アプリ",

                データ:{

                    メッセージ: 「私はpタグのタイトル値です」

                    pId: 「これはランダムなIDです」

                }

            })

出力は次のようになります。

2. v-bind: は次のように省略できます: コロンを直接記述することをお勧めします

<div id="アプリ">

    <p :title="message" :id="pId">私はpタグです</p>

 </div>

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

          <スクリプト>

            vm = new Vue({

                el:"#アプリ",

                データ:{

                    メッセージ: 「私はpタグのタイトル値です」

                    pId: 「これはランダムなIDです」

                }

            })

出力は上記と同じである

3. v-bind: 命令式の結合、

式を連結する場合、連結された文字列は引用符で囲む必要があります。そうしないと、変数として解析されます。

引用符なし:

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

引用を追加:

<p title="200" :title="message" :id="pId+'これは追加のIDです'">私はpタグです</p>

出力:

v-bindの使い方と注意点については以上です。v-bindの使い方と注意点についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • VueJs の V-bind ディレクティブの詳細な説明
  • VUE における v-bind の基本的な使い方の詳細な説明
  • Vue.js 学習ノート v-bind と v-on の分析
  • Vueはv-bindを使用してsrcとhrefに値を割り当てます

<<:  CSS スタイルが機能しない (史上最も完全な解決策の概要)

>>:  フォームファイル選択ボックスのスタイルをカスタマイズする例

推薦する

Ubuntu 18.04 で MySQL のインストール時にパスワードが要求されない場合の解決方法

Ubuntu 1804 への MySQL 5.7 のインストールについて詳しく紹介します。 MySQ...

HTMLタグを閉じるのを忘れないでください

Web 標準に準拠した Web ページの構築は、jb51.net が常に全員と議論しているトピックで...

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

MySQL 5.7.21 のインストールとパスワード設定のチュートリアル

MySQL5.7.21のインストールとパスワード設定のチュートリアルは次のとおりです。公式リファレン...

MySQL のデータ型とスキーマの最適化の詳細な説明

現在、MySQL の最適化について学習しています。この記事では、データ型とスキーマの最適化について紹...

Vueはアンカー配置機能を実装します

この記事では、アンカー配置を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...

CSS3+HTML5+JSでブロックの縮小・拡大アニメーション効果を実現

最近、あるプロジェクトに取り組んでいたとき、自分のプロジェクトでは CSS3 のアニメーション技術を...

コンテナDockerCommitを介してイメージを送信し、DockerPushでイメージをプッシュします。

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

JavaScript ウェブページ入門開発詳細説明

パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...

Tencent Cloud Server Centosにデータディスクをマウントする方法

まず、ハードディスクデバイスにデータディスクがあるかどうかを確認します # まずfdisk -lを実...

Navicat 接続 MySQL エラーの説明分析

目次環境仮想マシンバージョンMySQL バージョン事前準備MySQLの実行ステータスを確認するルート...

モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...

Node.js のイベント モジュールに関する知識ポイントのまとめ

Node の研究と応用を通じて、NodeJS はシングルスレッド、イベント駆動型、非ブロッキング I...

JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)

序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...