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すべてのフォーム要素のvalue 、 checked 、 selected属性の初期値を無視し、常に 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の効果はinputのvalue属性値をdata.nameの値と等しくすることであり、 v-modelの効果はinputとdata.bodyの間に双方向バインディングを確立することです。したがって、まず、 data.bodyの値がinputのvalue属性に与えられ、次に、 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: