v-for最简单的遍历数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <!-- v-for最基础的数组遍历 --> <li v-for = 'i in names'>{{i}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data : { names : ['jack','mary','lucy','jerry'] } }) </script> </body> </html>
如果需要索引(下标),添加index即可
<li v-for = '(i, index) in names'>{{index}}+{{i}}</li>
v-for遍历对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for = '(value,key) in info'>{{key}}----{{value}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data : { info : { name :'mary', age : 20, gender : 'female' } } }) </script> </body> </html>
也可以用index获取下标,在对象的遍历中比较少用