vue之循环遍历v-for的使用
因为循环遍历后端的集合,是一件很正常的事情所以写这个博客
可以以自己写的html页面整合vue.js作为模板,以后进行参考
v-for的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>04.Vue中v-for指令的使用</title>
</head>
<body>
<div id="app">
<span>{{user.name}} {{user.age}}</span>
<br>
<!-- v-for遍历对象 -->
<span v-for="(value,key,index) in user">
{{index}}:{{key}}:{{value}}
</span>
<!-- 通过v-for遍历数组 -->
<ul>
<li v-for="a,index in arr">
{{index}} {{a}}
</li>
</ul>
<!-- 通过v-for遍历数组中的对象 -->
<ul>
<li v-for="user , index in users">
{{index+1}}{{user.name}}==={{user.age}}==={{user.content}}
</li>
</ul>
</div>
<!-- 引入vue.js -->
<script type="text/javascript" src="../vue.js">
</script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
user: {
name: "小陈",
age: 23
},
arr: ["北京校区", "天津校区", "河南校区"],
users: [{
id: "1",
name: "xiaocheng",
age: 23,
content: "我曾经是个少年"
},
{
id: "2",
name: "小白",
age: 23,
content: "我曾经是一个邪恶的少年"
}
]
},
methods: {
}
});
</script>
</body>
</html>