总结:
<!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>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!