v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <script src="../../js/vue.js"></script> <title>v-for キーについて</title> </head> <本文> <div id="アプリ"> <div> <input type="text" v-model="名前"> <button @click="add">追加</button> </div> <ul> <li v-for="(リスト内の項目、インデックス)"> <input type="checkbox"> {{item.name}} </li> </ul> </div> <script type="text/javascript"> constアプリ = 新しいVue({ el: '#app', データ() { 戻る { 名前: ''、 新しいID: 3, リスト: [ { id: 1, name: '张三' }, { id: 2, 名前: 'Li Si' }, { id: 3、名前: '王五' } ]、 }; }, 計算: { }, メソッド: { 追加() { //これはunshiftであることに注意してください this.list.unshift({ id: ++this.newId, name: this.name }) this.name = '' } }, }); </スクリプト> <スタイルスコープ> </スタイル> </本文> </html> 李斯を選択して趙柳を加えた後、選択された人物は張三になりました。 v-for にキーがある場合を見てみましょう。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <script src="../../js/vue.js"></script> <title>v-for キーについて</title> </head> <本文> <div id="アプリ"> <div> <input type="text" v-model="名前"> <button @click="add">追加</button> </div> <ul> <li v-for="(item, index) in list" :key="item.id"> <input type="checkbox"> {{item.name}} </li> </ul> </div> <script type="text/javascript"> constアプリ = 新しいVue({ el: '#app', データ() { 戻る { 名前: ''、 新しいID: 3, リスト: [ { id: 1, name: '张三' }, { id: 2, 名前: 'Li Si' }, { id: 3、名前: '王五' } ]、 }; }, 計算: { }, メソッド: { 追加() { //これはunshiftであることに注意してください this.list.unshift({ id: ++this.newId, name: this.name }) this.name = '' } }, }); </スクリプト> <スタイルスコープ> </スタイル> </本文> </html> Li Si を選択して Zhao Liu を追加した後、選択された人物は依然として Li Si であり、変更はありません。 これは、Vue の下部にある Diff アルゴリズムによるものです。 diff アルゴリズムの処理方法は、次の図に示すように、操作の前後で DOM ツリーの同じレベルにあるノードをレイヤーごとに比較することです。 レイヤー内に同一のノード、つまりリスト ノードが多数ある場合、Diff アルゴリズムの更新プロセスもデフォルトで上記の原則に従います。 たとえば、次のような状況を考えてみましょう。 B と C の間に F を追加したいと考えています。Diff アルゴリズムのデフォルトの実装は次のとおりです。 つまり、C を F に、D を C に、E を D に更新し、最後に E を挿入します。これは非効率的ではありませんか? したがって、Diff アルゴリズムがノードを正しく識別し、新しいノードを挿入する正しい場所を見つけられるように、キーを使用して各ノードを一意に識別する必要があります。 vue のリスト ループには、key = "一意の識別子" を追加する必要があります。一意の識別子は、アイテム内の id インデックスなどになります。vue コンポーネントは再利用性が高いため、Key を追加するとコンポーネントの一意性を識別できます。各コンポーネントをより適切に区別するために、キーの主な機能は、仮想 DOM を効率的に更新することです。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTMLポップアップ透明レイヤーインスタンスのサイズを設定でき、比例することができます
>>: Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル
フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...
WeChatアプレット計算機の例、参考までに、具体的な内容は次のとおりです。インデックス.wxml ...
同時操作によるデータの重複を避けるために、データベースを操作するときにストアドプロシージャを使用して...
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
覚えて: IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...
簡単です。チュートリアルを見てください。ブロガー1. まずdockerを起動するサービスdocker...
この記事では、LinuxシステムのVMwareインストールの具体的な手順を参考までに紹介します。具体...
Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...
1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...
目次導入Tomcatへの接続方法APR と Tomcat ネイティブtomcat で APR を使用...
今日は、ネイティブ JS で実装された画像マーキー効果を紹介します。効果は次のとおりです。 実装され...
目次シーン紹介深い応答性トリガーゲッターDep.targetを探すゲッターセッター要約するシーン紹介...
SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...
目次序文スロークエリログの設定テスト付録: ログ解析ツール mysqldumpslow要約する序文こ...
CSS Houdini は、CSS 分野における最もエキサイティングなイノベーションとして知られてい...