Vue のリストレンダリング命令の簡単な分析: v-for

この記事では、Vue のリスト レンダリング コマンド v-for について説明します。お役に立てば幸いです。

#Vue のリスト レンダリング

##1.1.v-for⭐⭐

個人的には、基本的な構文の for ループだと感じていますが、使い方は似ていますが、形は異なりますが、理解すれば使えるようになります。 (学習ビデオ共有:

vue ビデオ チュートリアル
)使用方法;

1. 配列の走査

v-for="item in 数组"

v-for="(item, index) in 数组"

配列の走査の例:

<div class="item" v-for="item in products">
    <h3 class="title">商品:{{item.name}}</h3>
    <span>价格:{{item.price}}</span>
    <p>秒杀：{{item.desc}}</p>
</div>

const app = Vue.createApp({
        data() {
          return {
            //2.数组 存放的是对象
            products: [
              { id: 11, name: "mac", price: 1000, desc: "99" },
            ],
          };
        },
      });

app.mount("#app");

2. オブジェクトの走査

⭐⭐

v-for はオブジェクトの走査もサポートしており、1 つ、2 つ、または 3 つのパラメータをサポートしています:

1 つのパラメータ: "オブジェクト内の値";

• 2 つのパラメーター: "オブジェクト内の (値、キー)";
• 3 つのパラメーター: "オブジェクト内の (値、キー、インデックス)";
v-for はデジタル トラバーサルもサポートしています:

各項目は数字です;

<!-- 2.遍历对象 -->
      <ul>
        <li v-for="(value,key,index) in info">
          {{value}} - {{key}} - {{index}}
        </li>
      </ul>
 
 const app = Vue.createApp({
        data() {
          return {
            info: { bame: "why", age: 18, height: 1.88 },
          };
        },
      });
app.mount("#app");

3. 文字列のトラバース

<li v-for="item in 100">{{item}}</li>

1.2 .v-for と template#⭐⭐ template 要素を使用すると、複数の要素を含むコンテンツのレンダリングをループできます。

なぜここでは使用しないのですか? div を使用するのはどうでしょうか?

これまで勉強していたときはあまり考えていませんでしたが、ノートを整理しているときにこの問題を発見しました

理由

:

div でラップすると div も表示されます。

ただし、テンプレートでラップするとテンプレートは表示されません。div を使用する場合と比較して、保存されます。不要な div タグの使用。
• 実際、テンプレートの役割は、要素をラップするのに役立つテンプレート プレースホルダーです。ループ プロセス中、テンプレートはページにレンダリングされません。

#div (div に実際の意味がない場合は、テンプレートを使用して置き換えることができます)

• 0a0b09a86095b895314008cac4ff62a7
          45a2772a6b6107b401db3c9b82c049c2{{value}}54bdf357c58b8a65c66d7c19c8e4d114
          8e99a69fbe029cd4e2b854e244eab143{{key}}128dba7a3a77be0113eb0bea6ea0a5d0
          5a8028ccc7a7e27417bff9f05adf5932{{index}}72ac96585ae54b6ae11f849d2649d9e6
  16b28748ea4df4d9c2150843fecfba68

テンプレート

• #

  <template v-for="(value,key,index) in infos">
          <span>{{value}}</span>
          <strong>{{key}}</strong>
          <i>{{index}}</i>
  </template>

  #1.3.v-配列更新検出用

##⭐⭐ # Vue はリッスンされた配列の変更メソッドをラップするため、ビューの更新もトリガーします

ラップされたメソッドには次のものが含まれます:

Push() 配列の後ろから要素を挿入

pop() 配列の後ろから要素を削除#shift() 配列の前から要素を削除

unshift() 配列の先頭から要素を挿入
• splice() 配列の切り取り、挿入、削除
• sort() Sort
• reverse () Reverse
• これらのメソッドの使い方は、実は js でも似ています。思い出したときにもう一度調べてみてください。
• 配列を置き換えるメソッド

上記のメソッドは元の配列を直接変更します;

ただし、一部のメソッドは元の配列を置き換えず、filter()、concat( など) の新しい配列を生成します。 ) とスライス();

//并不是完整写法！！！

<li v-for="item in names">{{item}}</li>
names: ["abc", "bac", "aaa", "cbb"],
// 1.直接将数组修改为一个新的数组
this.names = ["cc", "kk"];

// 2.通过一些数组的方法，修改数组中的元素
this.names.push("cc");
this.names.pop();
this.names.splice(2, 1, "cc");
this.names.sort();
this.names.reverse();

[推奨関連ビデオ チュートリアル:

vuejs エントリ チュートリアル
• 、
Web フロントエンド エントリ
• ]

以上がVue のリストレンダリング命令の簡単な分析: v-forの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。