html
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
v-for指令：
1.用于展示列表数据
2.语法：v-for="(item,index) in arr" :key="item.id"
3.可遍历：数组、对象、字符串
-->
<!-- 准备一个容器 -->
<div id="root">
<ul>
<!-- 使用v-for遍历数组 -->
<li v-for="(item,index) in persons" :key="item.id">
{{item.id}}-----{{item.name}}------{{item.age}}岁-----{{item.sex}}
</li>
</ul>
<div>汽车信息</div>
<ul>
<!-- 使用v-for遍历对象 -->
<li v-for="(value,key) in car" :key="key">{{value}}</li>
</ul>
<h2>测试遍历字符串</h2>
<ul>
<li v-for="(data,index) in str">{{data}}---{{index}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
persons: [
{ id: "001", name: "老张", age: 20, sex: "男" },
{ id: "002", name: "老刘", age: 29, sex: "女" },
{ id: "003", name: "老马", age: 32, sex: "男" },
{ id: "004", name: "老王", age: 50, sex: "女" },
],
car: {
name: "奔驰G63",
price: "60万",
color: "灰色",
},
str: "abcdef",
},
});
</script>
</body>
</html>