Vue でのモデルバインド表示の if の v-text の説明v-text: 要素の InnerText プロパティは、{ が続く二重タグである必要があります。 { }} は同じ効果があります。あまり一般的には使用されません。注意: v-text は二重タグでのみ使用できます。 v-html:要素のinnerHTML v-オン実は、v-on の後にはクリックイベントだけでなく他のイベントも続くことができ、使い方も同様です。例: v-on:click/mouseout/mouseover/mousedown… 次のクリックは例です 注: すべての v-on は @ と省略できます。たとえば、v-click は @click と省略できます。 v-on ディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。一般的に言えば、DOMをリッスンして何らかの操作をトリガーすることです。これらの操作(クリックなど)がトリガーされた後に実行されるアクション(js)は、
v-ifv-if: この要素を挿入するかどうかを決定します。これは、要素を破棄して作成することと同じです。 v-forv-for の使用法 v-fo="(item,index) in data" インデックス インデックス アイテム インデックス データ 1. 通常の配列を反復処理し、データに通常の配列を定義する データ:{ リスト:[1,2,3,4,5,6] } <p v-for="(item,i) in list">--インデックス値--{{i}} --各項目--{{item}}</p> 2. オブジェクト配列を反復処理し、データにオブジェクト配列を定義します。 データ:{ リスト:[1,2,3,4,5,6], リストオブジェクト:[ {id:1、名前:'zs1'}、 {id:2、名前:'zs2'}、 {id:3, 名前:'zs3'}, ] } //v-for 命令を使用して HTML でレンダリングします <p v-for "(uesr,i) in listObj"> // id --{{user.id}}---名前-->{{user.name}} vモデル
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <title>ビュー</title> </head> <本文> <div id="アプリ"> <input v-model="メッセージ"> <p>入力値: {{message}}</p> </div> <スクリプト> var アプリ = 新しい Vue({ el: '#app', データ: { メッセージ: 'Hello Word!' } }) </スクリプト> </本文> </html> vバインドid、class、href、src など、HTML 上の要素の属性を動的に更新するために使用されます。略語: v-bind:href 略語: href <a :href="{{url}}">aa</a> 以下は <スタイル> 。アクティブ{ 境界線: 1px 実線の赤; } </スタイル> <div id="アプリ"> <img v-bind:src="imgSrc" alt=""> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"> <br> <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"> </div> var アプリ = 新しい Vue({ el:"#アプリ", データ:{ 画像ソース:"upload/2022/web/logo.png", imgTitle:"ヴォルデモート", アクティブ:false }, メソッド: { トグルアクティブ:関数(){ this.isActive = !this.isActive; } }, }) v-ショー非表示の要素が非表示であると判断された場合、要素のスタイルに display:none が追加されます。 CSSスタイルの切り替えに基づいています v-bindとv-modelの違いv-bind と v-model を一緒に使用する必要があるケースがいくつかあります。 <input :value="名前" v-model="本文"> data.name と data.body では、どちらがどちらによって変更されますか?それらは衝突するでしょうか? <input v-model="メッセージ"> <input v-bind:value="message" v-on:input="message = $event.target.value" /> Vue での v-instructions の使用に関するこの記事はこれで終了です。Vue での v-instructions の使用に関する詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: docker run で ./ 相対パスを使用してファイルまたはディレクトリをマウントできない問題を解決する
序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...
目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...
序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...
コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...
この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...
序文Node は新しいプログラミング言語ではなく、JavaScript のランタイムに過ぎないとよく...
目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...
この記事では、SMS送信のカウントダウンを実装するためのJavaScriptの具体的なコードを参考ま...
改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...
もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点につ...
Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...
プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...