Vue入门 Demo12 Vue中的列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" />
<title>Vue中的列表渲染</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 数组循环开始 -->
<!-- <div id="app">
<div
v-for="(item,index) of list"
:key="item.id"
>
{{item.text}} --- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [
{
id: "1",
text: "1",
},
{
id: "2",
text: "2",
},
{
id: "3",
text: "3",
}
]
},
methods: {
}
})
</script> -->
<!-- 数组循环结束 -->
<!-- 对象循环开始 item:循环内容 key:键值 index:索引 -->
<div id="app">
<div
v-for= "(item,key,index) of userInfo"
>
{{item}} --- {{key}} --- {{index}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userInfo: {
name: "hewen",
age: "25",
gender: "male",
}
},
methods: {
}
})
</script>
<!-- 对象循环结束 -->
</body>
</html>
