1. v-for指令
- 作用：根据数据生成列表结构
- 语法：（item，index）in 数据
- 说明：数组长度的更新会同步到页面上，是响应式的
完整代码
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6. <title>Document</title> 7. </head> 8. <body> 9. 10. <div id="app"> 11. <input type="button" value="添加" @click='add'> 12. <input type="button" value="删除" @click='remove'> 13. <!-- 数组取值 --> 14. <ul> 15. <li v-for='item in arrInfo'> 16. {{item}} 17. </li> 18. </ul> 19. 20. <!-- 数组下标 --> 21. <ul> 22. <li v-for='(item,index) in arrInfo'> 23. {{index}} {{item}} 24. </li> 25. </ul> 26. 27. 28. <!-- 对象数组取值 --> 29. <ul> 30. <li v-for='item in dataInfo' v-bind:title='item.name'> 31. {{item.name}} 32. </li> 33. </ul> 34. 35. 36. </div> 37. <!-- 开发环境版本，包含了有帮助的命令行警告 --> 38. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 39. 40. <script> 41. var app = new Vue({ 42. el:'#app', 43. data:{ 44. arrInfo:['名字:大海','年龄:26','城市:大连','职业:测试工程师'], 45. dataInfo:[ 46. {'name':'大海'}, 47. {'name':'小白'} 48. ] 49. }, 50. methods:{ 51. add:function(){ 52. this.dataInfo.push({'name':'浪迹天涯'}); 53. 54. }, 55. remove:function(){ 56. this.dataInfo.shift(); 57. } 58. 59. } 60. }) 61. </script> 62. 63. </body> 64. </html>
