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>
（本文仅作个人学习记录用，如有纰漏敬请指正）