经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue.js中v-for指令的用法介绍
来源:jb51  时间:2022/3/14 9:45:48  对本文有异议

一、什么是v-for指令

在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能,包括遍历数组、对象、数组对象等。

二、遍历数组

代码示例如下:

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <!--引入vue.js-->
  9. <script src="node_modules/vue/dist/vue.js" ></script>
  10. <script>
  11. window.onload=function(){
  12. // 构建vue实例
  13. new Vue({
  14. el:"#my",// el即element,表示挂载的元素,不能挂载在HTML和body元素上面
  15. data:{
  16. array:[1,2,3,4],//数组
  17. },
  18. // 方法
  19. methods:{
  20.  
  21. }
  22. })
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="my">
  28. <div>
  29. <h1>下面的使用v-for遍历数组</h1>
  30. <div>
  31. <h1>只显示值</h1>
  32. <ul>
  33. <li v-for=" v in array">{{v}}</li>
  34. </ul>
  35. </div>
  36. <div>
  37. <h1>显示值和索引</h1>
  38. <ul>
  39. <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
  40. </ul>
  41. </div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>

其中index表示数组的索引

效果如下图所示:

注意:最新的版本中已经移除了$index获取数组索引的用法

三、遍历对象

代码示例如下:

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <!--引入vue.js-->
  9. <script src="node_modules/vue/dist/vue.js" ></script>
  10. <script>
  11. window.onload=function(){
  12. // 构建vue实例
  13. new Vue({
  14. el:"#my",// el即element,表示挂载的元素,不能挂载在HTML和body元素上面
  15. data:{
  16. array:[1,2,3,4],//数组
  17. },
  18. // 方法
  19. methods:{
  20.  
  21. }
  22. })
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <div id="my">
  28. <div>
  29. <h1>下面的使用v-for遍历数组</h1>
  30. <div>
  31. <h1>只显示值</h1>
  32. <ul>
  33. <li v-for=" v in array">{{v}}</li>
  34. </ul>
  35. </div>
  36. <div>
  37. <h1>显示值和索引</h1>
  38. <ul>
  39. <li v-for=" (v,index) in array">值:{{v}},对应的索引:{{index}}</li>
  40. </ul>
  41. </div>
  42. </div>
  43. </div>
  44. </body>
  45. </html>

效果如下图所示:

四、遍历数组对象

代码示例如下:

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>使用v-for指令遍历数组对象</title>
  8. <!--引入vue.js-->
  9. <script src="node_modules/vue/dist/vue.js" ></script>
  10. <script>
  11. window.onload=function(){
  12. // 构建vue实例
  13. new Vue({
  14. el:"#my",// el即element,表示挂载的元素,不能挂载在HTML和body元素上面
  15. data:{
  16. lists:[
  17. {name:"kevin",age:23},
  18. {name:"tom",age:25},
  19. {name:"joy",age:28}
  20. ]
  21. },
  22. // 方法
  23. methods:{
  24.  
  25. }
  26. })
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div id="my">
  32. <div>
  33. <h1>下面的使用v-for遍历数组对象</h1>
  34. <div>
  35. <h1>只显示值</h1>
  36. <ul>
  37. <li v-for=" list in lists">name值:{{list.name}},age值:{{list.age}}</li>
  38. </ul>
  39. </div>
  40. <div>
  41. <h1>显示值和键</h1>
  42. <ul>
  43. <li v-for=" (list,index) in lists">name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}</li>
  44. </ul>
  45. </div>
  46. </div>
  47. </div>
  48. </body>
  49. </html>

效果如下图所示:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号