1.基础使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本列表</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
v-for指令：
作用：用于展示列表的数据
写法：v-for="a in xxx" :key="yyy"
a是内容或值，xxx可以是数组、对象、字符串、数字，key必须是唯一的
由于历史遗留问题，in也可以写作of
还可以写两个参数的形式 v-for="(a,b) in xxx" :key="yyy"，a依旧是内容或值，b是索引或者是键(key)
可遍历：数组、对象、字符串、数字
-->
<body>
<div id="root">
<!-- 遍历数组 -->
<h1>人员列表</h1>
<ul>
<li v-for="(person, index) in persons" :key="person.id">
{{person.name}}--{{person.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h1>动物信息</h1>
<ul>
<li v-for="(value, key) in animal" :key="key">
{{key}}：{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h1>字符串遍历</h1>
<ul>
<li v-for="(char, index) in str" ::key="index">
{{index}}：{{char}}
</li>
</ul>
<!-- 遍历一定次数 -->
<h1>遍历一定次数</h1>
<ul>
<li v-for="(number, index) in 5" :key="index">
{{index}}：{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
persons: [
{
id: "001",
name: "张三",
age: 20
},
{
id: "002",
name: "李四",
age: 21
},
{
id: "003",
name: "王五",
age: 22
}
],
animal: {
name: "狗",
color: "灰色",
price: "100元"
},
str: "HelloWorld"
}
})
</script>
</body>
</html>
（本文仅作个人学习记录用，如有纰漏敬请指正）
标签：index,Vue,name,渲染,age,列表,id From： https://www.cnblogs.com/jmsstudy/p/17536878.html