Vue学习------------（12）v-for
v-for遍历数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//在遍历过程中，没有使用索引值（下标值）
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
//在遍历过程中，获取索引值（下标值）
<ul>
<li v-for="(name, index) in names">{{index+1}}.{{name}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
names: ['zhang' ,'tang', 'li' ,'hu']
}
})
</script>
</body>
</html>
v-for遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
//在遍历对象的过程中，如果只是获取一个值，那么获取到的是value
<ul>
<li v-for="item in obj">{{item}}</li>
</ul>
//获取key和value 格式：(value,key)
<ul>
<li v-for="(value, key) in obj">{{value}} {{key}}</li>
</ul>
//获取key和value和index 格式：(value,key,index)
<ul>
<li v-for="(value, key, index) in obj">{{value}} {{key}} {{index}} </li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
obj: {
name: 'zhang',
age: 18,
height: 1.88
}
})
</script>
</body>
</html>
v-for绑定key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="name in names" :key="name">{{name}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el : '#app',
data: {
names: ['zhang' ,'tang', 'li' ,'hu']
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号