vue.js でよく使われる v 命令の解析

vue.js でよく使われる v 命令の解析

Vue でのモデルバインド表示の if の v-text の説明

v-text: 要素の InnerText プロパティは、{ が続く二重タグである必要があります。 { }} は同じ効果があります。あまり一般的には使用されません。注意: v-text は二重タグでのみ使用できます。

v-html:

要素のinnerHTML
v-htmlは実際には要素のinnerHTMLに値を割り当てます

v-オン

実は、v-on の後にはクリックイベントだけでなく他のイベントも続くことができ、使い方も同様です。例: v-on:click/mouseout/mouseover/mousedown…

次のクリックは例です

注: すべての v-on は @ と省略できます。たとえば、v-click は @click と省略できます。

v-on ディレクティブを使用すると、DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行できます。一般的に言えば、DOMをリッスンして何らかの操作をトリガーすることです。これらの操作(クリックなど)がトリガーされた後に実行されるアクション(js)は、

v-on:click="item+=1"

v-if

v-if: この要素を挿入するかどうかを決定します。これは、要素を破棄して作成することと同じです。

v-for

v-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モデル

v-modelディレクティブを使用して、ラベル(ボタン、選択などさまざまなタイプがあります)と要素の双方向データバインディングを実行できます。
v-modelすべてのフォーム要素のvaluecheckedselected属性の初期値を無視し、常に Vue インスタンスのデータをデータソースとして使用します。コンポーネントのデータ オプションで JavaScript を使用して初期値を宣言する必要があります。

<!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>

以下はv-bindを示すコードです。

    <スタイル>
        。アクティブ{
            境界線: 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 では、どちらがどちらによって変更されますか?それらは衝突するでしょうか?
実は、それらの関係は上で説明した通りです。 v-bindの効果には双方向バインディングが含まれていないため、 :valueの効果はinputvalue属性値をdata.nameの値と等しくすることであり、 v-modelの効果はinputdata.bodyの間に双方向バインディングを確立することです。したがって、まず、 data.bodyの値がinputvalue属性に与えられ、次に、 inputに入力された値が変化すると、 data.bodyもそれに応じて変化します。
前述のように、次の 2 つの文は同等です。

<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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue v-onディレクティブの使用について
  • Vue ディレクティブ v-html はフィルター関数の例を使用します
  • Vue v-text ディレクティブの簡単な使用例
  • Vue.js 命令 v-for の使用と添字インデックスの取得
  • Vue.js における v-on イベント命令の使用に関する簡単な説明
  • Vue.js の v-cloak ディレクティブと詳細な使用方法
  • Vue.js の v-for の使い方とインデックスの取得方法

<<:  docker run で ./ 相対パスを使用してファイルまたはディレクトリをマウントできない問題を解決する

>>:  WMLタグの概要

推薦する

MySQL 5.7 における基本的な JSON 操作ガイド

序文プロジェクトのニーズにより、ストレージ フィールドは JSON 形式で保存されます。プロジェクト...

JavaScript の静的スコープと動的スコープを例を使って説明します

目次序文静的スコープと動的スコープ静的スコープ実行プロセス動的スコープ実行プロセスエクササイズ練習1...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

MySQLクエリは、フィールドが数値とカンマではないことを指定します。

コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

require loaderの実装原理の深い理解

序文Node は新しいプログラミング言語ではなく、JavaScript のランタイムに過ぎないとよく...

Node+Express テストサーバーのパフォーマンス

目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...

MySQLコマンドラインでSQLファイルを実行するいくつかの方法

目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...

WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

目次背景ターゲット効果アイデア成し遂げるスワイパーは変更を聞きますカスタムドットモジュール変更イベン...

SMS送信のカウントダウンを実装するJavaScript

この記事では、SMS送信のカウントダウンを実装するためのJavaScriptの具体的なコードを参考ま...

5つのCSSスクロール天井実装方法の比較(パフォーマンス向上版)

改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...

Alipay の新しいホームページのフロントエンドの実践的な概要

もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点につ...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

Docker Compose で環境変数を参照する方法の例

プロジェクトでは、さまざまな条件や使用シナリオを制御するために、docker-compose.yml...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...