ホームページ > 記事 > ウェブフロントエンド > Vue.JS 入門チュートリアル リストのレンダリング
Vue.JS 入門チュートリアル リストのレンダリング
- 高洛峰オリジナル
- 2016-12-03 10:30:151319ブラウズ
v-repeat ディレクティブを使用して、ViewModel 上のオブジェクトの配列に基づいてリストをレンダリングできます。このディレクティブは、配列内のオブジェクトごとに、そのオブジェクトを $data オブジェクトとして持つ子 Vue インスタンスを作成します。これらの子インスタンスは親インスタンスのデータ スコープを継承するため、繰り返されるテンプレート要素内で、親インスタンスのプロパティだけでなく子インスタンスのプロパティにもアクセスできます。さらに、$index プロパティを通じて現在のインスタンスに対応する配列インデックスを取得することもできます。
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})
効果を確認してください。結果は簡単に得られるはずです
ブロックレベルの繰り返し
複数のノードを含むブロックを繰り返す必要がある場合があります。その場合、bebc987191cfc40087e8e576c789c501 タグはセマンティック ラッピングの役割のみを果たし、それ自体ではレンダリングされません。例:
<ul>
<template v-repeat="list">
<li>{{msg}}</li>
<li class="divider"></li>
</template>
</ul>
単純な値の配列
単純な値（プリミティブ値）は、オブジェクトではない文字列、数値、ブール値などです。単純な値を含む配列の場合、$value を使用して値に直接アクセスできます:
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
new Vue({
el: '#tags',
data: {
tags: ['JavaScript', 'MVVM', 'Vue.js']
}
})
エイリアスの使用
暗黙的にフォールバックするのではなく、現在のスコープ内の変数により明示的にアクセスしたい場合があります。親スコープ。これを行うには、v-repeat ディレクティブに引数を指定し、それを反復処理する項目のエイリアスとして使用します。push()、pop()、shift()、unshift()、splice()、sort を含む() および reverse()) はインターセプトされるため、これらのメソッドを呼び出すと、ビューの更新も自動的にトリガーされます。
<ul id="users">
<li v-repeat="user : users">
{{user.name}} - {{user.email}}
</li>
</ul>
var users = new Vue({
el: '#users',
data: {
users: [
{ name: 'Foo Bar', email: 'foo@bar.com' },
{ name: 'John Doh', email: 'john@doh.com' }
]
}
}); 拡張メソッド
Vue.js は、観察された配列に 2 つの便利なメソッドを追加します: $set ( ) と $remove()。これらの変更は Vue.js では検出できないため、demo.items[0] = {} など、データバインド配列の要素をインデックスによって直接設定することは避けてください。拡張 $set() メソッドを使用する必要があります。
// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()
$remove() は、splice() メソッドの糖衣構文にすぎません。指定されたインデックスにある要素を削除します。引数が数値でない場合、$remove() は配列内で値を検索し、最初に見つかった対応する要素を削除します。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
tag.tags.pop();
}
</script>
</body>
</html>// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})
配列の置換filter()、concat()、slice() などの非変更メソッドを使用すると、返される配列は別のインスタンスになります。この場合、古い配列を新しい配列に置き換えることができます:
// 删除索引为 0 的元素。 demo.items.$remove(0)
場合によっては、配列を完全に新しいオブジェクト (API 呼び出しによって返されたオブジェクトなど) に置き換える必要がある場合があります。各データ オブジェクトに一意の id 属性がある場合は、track-by 属性パラメーターを使用して Vue.js にヒントを与え、同じ ID を持つ既存の Vue インスタンスと DOM ノードを再利用できるようにすることができます。
例: データは次のようになります
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
//tag.tags.pop();
//tag.tags[0] = '修改后的内容不生效';
tag.tags.$set(0, '修改后的内容生效');
tag.tags.$remove(1);
}
</script>
</body>
</html>
その後、次のようなプロンプトを表示できます:
demo.items = demo.items.filter(function (item) {
return item.childMsg.match(/Hello/)
})
items 配列を置換するときに、Vue.js が _uid: '88f869d' を持つ配列を見つけた場合、同じ _uid を持つ既存のインスタンスを直接再利用できることがわかります。 track-by を適切に使用すると、大きな v-repeat リストを新しいデータで再レンダリングするときのパフォーマンスが大幅に向上します。
オブジェクトの走査
v-repeat を使用して、オブジェクトのすべてのプロパティを走査することもできます。重複した各インスタンスには、特別な属性 $key があります。単純な値の場合は、配列内の単純な値にアクセスするのと同じように $value プロパティを使用することもできます。{
items: [
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
]
} <div v-repeat="items" track-by="_uid"> <!-- content --> </div>ECMAScript 5 には、新しいプロパティがオブジェクトに追加されたとき、またはオブジェクトからプロパティが削除されたときを検出するメカニズムがありません。この問題に対処するために、$add(key, value)、$set(key, value)、および $delete(key) という 3 つの拡張メソッドが Vue.js の監視オブジェクトに追加されます。これらのメソッドを使用すると、監視されているオブジェクトのプロパティが追加または削除されたときに、対応するビューの更新をトリガーできます。 $add メソッドと $set メソッドの違いは、指定されたキーがオブジェクト内にすでに存在する場合に $add が早期に戻るため、obj.$add(key) を呼び出しても既存の値が undefined で上書きされないことです。
反復範囲
<ul id="repeat-object">
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
<li>===</li>
<li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul> new Vue({
el: '#repeat-object',
data: {
primitiveValues: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'Bye'
}
}
}
});
配列フィルター 場合によっては、実際に元のデータを変更したりリセットしたりせずに、フィルター処理または並べ替えられた配列のバージョンを表示する必要があるだけです。 Vue は、そのようなニーズを簡素化するために、filterBy と orderBy という 2 つの組み込みフィルターを提供します。
りー
以上がこの記事の全内容です、皆様の学習のお役に立てれば幸いです