什么是列表渲染？
Vue.js 中的列表渲染是指使用 Vue 的指令v-for来基于源数据多次渲染元素或组件的过程，是 Vue 中处理集合或数组数据的一种常见模式，允许你将数组中的每个项转换成视图中的一组元素，根据一个数组来动态渲染出一系列元素。
v-for
作用：实现列表渲染，它允许你基于一个数组来多次渲染一个元素或 Vue 组件，从而创建一个列表。
注意事项！
v-for被通常用于列表渲染遍历数组、列表渲染遍历对象、列表渲染遍历字符串、列表渲染遍历次数，注意通常要配合使用 key 属性和计算属性可以帮助 Vue 进行高效的列表渲染，避免不必要的性能开销。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="icon" href="img/network.png" type="image/x-icon">
<script src="js/Vue.js"></script>
<!-- 引入Vue.js文件 -->
</head>
<body>
<div id="root">
<h1>人员列表</h1>
<ul>
<li v-for="(person,index) in personnel" :key="person.id">
<!-- <li v-for="(person,index) of personnel" :key="index"> -->
<!--
v-for：遍历循环
index:索引
-->
{{person.name}}-{{person.age}}
</li>
</ul>
<!-- 遍历数组对象 -->
<hr>
<h1>汽车信息</h1>
<ul>
<li v-for="(value,index) in car" :key="index">
{{index}}-{{value}}
</li>
</ul>
<!-- 遍历对象 -->
<hr>
<h1>遍历字符串</h1>
<ul>
<li v-for="(char,index) in str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历字符串 -->
<hr>
<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;
//阻止Vue在启动时生成生产提示
new Vue({
el: '#root',
data: {
personnel: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 },
],
// 数组对象
car: {
name: '奥迪A8',
price: '120万',
color: '黑色',
},
// 对象
str: 'Hello~World!'
//字符串
}
})
</script>
</body>
</html>