目次
1. 原理概要
v-for 命令は、テンプレート コンパイルのコード生成フェーズで実装され、リスト レンダリング命令 v-for は、配列またはオブジェクトをトラバースするときに使用する必要があります。Vue.js が v-for を使用してレンダリングされた要素のリストを更新する場合、デフォルトで「インプレース再利用」戦略を使用します。データ項目のデータが変更された場合、Vue.js はデータ項目の変更に合わせてDOM 要素を移動しなくなりますが、ここで各要素を再利用し、レンダリングされた各要素が特定のインデックスの下に表示されるようにします。 .要素。
2. 基本的な使い方
v-for は Vue.js のループ文であり、その式はitem in itemsの形式 と同様に in または of と組み合わせて使用する必要があります。
(1) v-for ループの通常配列
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历数组</h2>
<div class="basic">
<p v-for="(item,index) in lists" :key="index">
{
{index}}------{
{item}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
lists:["java程序设计","android程序设计","php程序设计","呵呵呵"],
},
methods: {
}
})
</script>
</body>
</html>以下の結果:
この式では、listsは配列、itemは現在のデータ部分、index は現在のインデックス値を表します。リスト レンダリングは、区切り文字の代わりに使用することもできます。コードにはkey属性もあり、ループのパフォーマンスを向上させることができます。
(2) v-for ループ オブジェクト
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
line-height: 30px;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历对象</h2>
<div class="basic">
<p v-for="(value,name,index) in car">
{
{index}}-----{
{name}}------{
{value}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
car: {
name: "奥迪a8",
color: "黑色",
Number: "124215dhsdhsdf"
}
},
methods: {
}
})
</script>
</body>
</html>以下の結果:
(3) v-for ループ オブジェクト配列
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for遍历对象数组</h2>
<div class="basic">
<p v-for="(item,index) in persons">
{
{index}}-----{
{item.id}}-----{
{item.name}}-----{
{item.age}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
persons: [
{ id: "0001", name: "张三", age: "18" },
{ id: "0002", name: "李四", age: "18" },
{ id: "0003", name: "王五", age: "28" }
]
},
methods: {
}
})
</script>
</body>
</html>以下の結果:
(4) v-for 反復整数
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../vue-2.7.14.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#root {
width: 800px;
height: 600px;
background-color: yellowgreen;
margin: 0 auto;
text-align: center;
padding: 30px;
}
.basic {
margin: 0 auto;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="root">
<h2>v-for迭代整数</h2>
<div class="basic">
<p v-for="count of 10">
{
{count}}
</p>
</div>
</div>
<script>
const vm = new Vue({
el: '#root',
})
</script>
</body>
</html>以下の結果:
