Vue---条件语句和循环语句（二）

骑猪看日落 2021-09-14 12:30 635阅读 0赞

v-for 迭代数组

我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

案例1

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - v-for 迭代数组</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <ul>
  11.     <li v-for="site in sites">
  12.       {
  13.     { site.name }}
  14.     </li>
  15.   </ul>
  16. </div>
  18. <script>
  19. new Vue({
  20.   el: '#app',
  21.   data: {
  22.     sites: [
  23.       { name: '足球' },
  24.       { name: '篮球' },
  25.     ]
  26.   }
  27. })
  28. </script>
  29. </body>
  30. </html>

20171221143923167
-—— ul 无序列表； ol 有序列表。

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

案例2

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - v-for 迭代数组</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <ul>
  11.     <li v-for="(site,index) in sites">
  12.       {
  13.     { site.name }} -{
  14.     {index}}
  15.     </li>
  16.   </ul>
  17. </div>
  19. <script>
  20. new Vue({
  21.   el: '#app',
  22.   data: {
  23.     sites: [
  24.       { name: '足球' },
  25.       { name: '篮球' },
  26.     ]
  27.   }
  28. })
  29. </script>
  30. </body>
  31. </html>

20171221145108399

v-for 迭代对象

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - v-for 迭代对象</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <ul>
  11.     <li v-for="value in object">
  12.     {
  13.     { value }}
  14.     </li>
  15.   </ul>
  16. </div>
  18. <script>
  19. new Vue({
  20.   el: '#app',
  21.   data: {
  22.     object: {
  23.       name: '程序员',
  24.       age:24,
  25.       interest: '熬夜敲代码'
  26.     }
  27.   }
  28. })
  29. </script>
  30. </body>
  31. </html>

20171221145229900

也可以提供第二个的参数为键名： 

  1. <div v-for="(value, key) in object">
  2.   {
  3.     { key }}: {
  4.     { value }}
  5. </div>

20171221150622810
第三个参数为索引： 

  1. <div v-for="(value, key, index) in object">
  2.   {
  3.     { index }}. {
  4.     { key }}: {
  5.     { value }}
  6. </div>

v-for 迭代整数

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - v-for 迭代整数</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <ul>
  11.     <li v-for="n in 5">
  12.      {
  13.      { n }}
  14.     </li>
  15.   </ul>
  16. </div>
  18. <script>
  19. new Vue({
  20.   el: '#app'
  21. })
  22. </script>
  23. </body>
  24. </html>

v-for 迭代数组

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - v-for 迭代数组</title>
  6. <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.   <ul>
  11.     <li v-for="n in [2,4,6]">
  12.      {
  13.      { n }}
  14.     </li>
  15.   </ul>
  16. </div>
  18. <script>
  19. new Vue({
  20.   el: '#app'
  21. })
  22. </script>
  23. </body>
  24. </html>

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用v-bind 来绑定动态值 (在这里使用简写)：

  1. <div v-for="item in items" :key="item.id">
  2.   <!-- 内容 -->
  3. </div>

建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

发表评论

表情：
评论列表 （有 0 条评论，635人围观）

还没有评论，来说两句吧...

相关阅读