<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本列表</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历列表-->
<h2>人员列表</h2>
<ul>
<!-- 方法一-->
<!-- <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
<!-- 方法二-->
<li v-for="(data, index) in listData" :key="index">{{data.name}} - {{data.age}}</li>
</ul>
<!-- 遍历对象-->
<h2>汽车信息</h2>
<ul>
<li v-for="(key, value) of car" :key="key">{{key}} - {{value}}</li>
</ul>
<!-- 遍历字符串-->
<h2>字符串信息</h2>
<ul>
<li v-for="(c, index) of testStr" :key="index">{{c}} - {{index}}</li>
</ul>
<!-- 遍历固定次数-->
<h2>固定遍历</h2>
<ul>
<li v-for="(number, index) of 5" :key="index">{{number}} - {{index}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: "#root",
data: {
listData: [
{id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 19},
{id: 3, name: '王五', age: 20}
],
car: {
name: "特斯拉",
model: "Model3",
price: "29.9w"
},
testStr: "Hello!"
}
})
</script>
</html>