总结：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script type="text/javascript" src="../Js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息(遍历数组)：</h2>
<hr>
<h2 style="color: burlywood;">
1.:key="p.id"，表示动态属性，动态绑定唯一标识(注：建议应始终存在该属性的设置)<br />
2.写法<br />
v-for="p in personList" :key="p.id" ==> v-for="(p,index) in personList" :key="index"<br />
v-for指令<br />
1.用于展示列表数据<br />
2.语法：v-for="(item,index) in objXXX" :key="xxx"<br />
3.可遍历：数组、对象、字符串(使用较少)、指定次数(使用较少)<br />
</h2>
<!-- 遍历数组 -->
<ul>
<li v-for="p in personList" :key="p.id">
{{p.id}}-{{p.name}}-{{p.age}}
</li>
<hr>
<li v-for="(p,index) in personList" :key="index">
{{p.id}}-{{p.name}}-{{p.age}}-{{index}}
</li>
</ul>
<hr>
<!-- 遍历对象 -->
<h2>轿车列表信息(遍历对象)：</h2>
<ul>
<li v-for="(value,k) in carList" :key="k">
{{k}}-{{value}}
</li>
</ul>
<hr>
<!-- 遍历字符串 使用较少-->
<h2>遍历字符串-使用较少</h2>
<ul>
<li v-for="(char,index) in strInfo" :key="index">
{{char}}-{{index}}
</li>
</ul>
<hr>
<!-- 遍历指定次数 使用较少-->
<h2>遍历指定次数-使用较少</h2>
<ul>
<li v-for="(number,index) of 3" :key="index">
{{number}}-{{index}}
</li>
</ul>
<hr>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data: {
personList: [
{ id: '001', name: '乔峰', age: 28 },
{ id: '002', name: '虚竹', age: 25 },
{ id: '003', name: '段誉', age: 22 },
],
carList:
{
name: '比亚迪汉',
price: '30w'
},
strInfo: 'abc',
},
})
</script>
博客内容主要用于日常学习记录，内容比较随意，如有问题，还需谅解！！！
浙公网安备 33010602011771号