Vueでのマップの使い方-Vue.js-php.cn

Vueでのマップの使い方

下次还敢

リリース： 2024-05-02 21:54:37

オリジナル

1106 人が閲覧しました

Map は Vue.js でキーと値のペアを保存するために使用されます。キーは任意のデータ型にすることができます。使用方法には、マップの作成、データの追加とアクセス、データの削除、データの走査が含まれます。地図は応答性が高く、ビューが変更されると自動的に更新されます。

Vueでのマップの使い方

Vue.js での Map の使用

Map は、キーと値のペアを格納するネイティブ JavaScript データ構造です。キーは任意のタイプのデータにできるのに対し、オブジェクトのキーは文字列である必要があるため、オブジェクトよりもデータの保存に適しています。

Vue.js でのマップの使用

Vue.js では、Vue.Map コンストラクターを使用してマップを作成できます。 ES6 マップ構文を使用できます:

<code class="javascript">const map = new Vue.Map();</code>

ログイン後にコピー

データの追加とアクセス

キーと値のペアをマップに追加:

<code class="javascript">const map = new Map();</code>

ログイン後にコピー

key:

<code class="javascript">map.set('key', 'value');</code>

ログイン後にコピー

データの削除

マップからキーと値のペアを削除:

<code class="javascript">map.get('key');</code>

ログイン後にコピー

データを走査

#forEach

を使用してマップ内のすべてのキーと値のペアを走査します:

<code class="javascript">map.delete('key');</code>

ログイン後にコピー

すべてのキーと値のペアの反復子を取得するには entries を使用します:

<code class="javascript">map.forEach((value, key) => {
  console.log(`Key: ${key}, Value: ${value}`);
});</code>

ログイン後にコピー

Vue の反応性の使用

Vue.js ではマップは反応的です。つまり、マップが変更されるとビューが自動的に更新されます。

<code class="javascript">const entries = map.entries();
for (let entry of entries) {
  console.log(`Key: ${entry[0]}, Value: ${entry[1]}`);
}</code>

ログイン後にコピー

例

キーと値のペアを含むマップを作成します:

<code class="javascript">const map = Vue.observable(new Map());

map.set('key', 'value'); //视图自动更新</code>

ログイン後にコピー

マップを走査し、キーと値のペアを出力します:

リーリー

以上がVueでのマップの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。