v-for遍历数组 || v-for遍历对象
生活随笔
收集整理的這篇文章主要介紹了
v-for遍历数组 || v-for遍历对象
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--1.在遍歷的過程中,沒有使用索引值(下標值)--><ul><li v-for="item in names">{{item}}</li></ul><!--2.在遍歷的過程中, 獲取索引值--><ul><li v-for="(item, index) in names">{{index+1}}.{{item}}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {names: ['why', 'kobe', 'james', 'curry']}}) </script></body> </html>
v-for遍歷對象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><!--1.在遍歷對象的過程中, 如果只是獲取一個值, 那么獲取到的是value--><ul><li v-for="item in info">{{item}}</li></ul><!--2.獲取key和value 格式: (value, key) --><ul><li v-for="(value, key) in info">{{value}}-{{key}}</li></ul><!--3.獲取key和value和index 格式: (value, key, index) --><ul><li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li></ul> </div><script src="../js/vue.js"></script> <script>const app = new Vue({el: '#app',data: {info: {name: 'why',age: 18,height: 1.88}}}) </script></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的v-for遍历数组 || v-for遍历对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： v-show 与 v-if 的区别
- 下一篇： 检测数组更新