categories:
- vue基础
tags: - v-for列表渲染
v-for列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for 列表渲染</title>
<style>
</style>
</head>
<body>
<div id="app">
<div>列表渲染,打印数组</div>
<!-- 列表渲染,打印数组-->
<p v-for="item in menus">{{ item.id}}----{{ item.name }}</p>
<hr>
<div>列表渲染,展示索引</div>
<!-- 列表渲染，展示索引-->
<p v-for="(item,index) in menus">{{index}}---{{ item.id}}----{{ item.name }}</p>
<hr>
<div>列表渲染,维护状态</div>
<!-- 列表渲染，维护状态-->
<p v-for="(item,index) in menus" v-bind:key="item.id">{{ item.id}}----{{ item.name }}</p>
<hr>
<div>列表渲染,打印对象键值</div>
<!-- 列表渲染,打印对象键值-->
<p v-for="value in Obj">{{ value }}</p>
<hr>
<div>列表渲染,打印对象建名键值</div>
<!-- 列表渲染,打印对象建名键值-->
<p v-for="(value,name) in Obj">{{ name }}-----{{value}}</p>
<hr>
<div>列表渲染,打印对象建名键值索引</div>
<!-- 列表渲染,打印对象建名键值索引-->
<p v-for="(value,name,index) in Obj">{{ index }}---{{ name }}-----{{value}}</p>
<hr>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
menus:[
{id:1,name:'苹果'},
{id:2,name:'桃子'},
{id:3,name:'西瓜'},
{id:4,name:'青梅'},
],
Obj: {
title: '水果星球',
size: '9987',
}
},
methods:{
}
})
</script>
</body>
</html>