v-for 指令

发表于 更新于 分类于

v-for 遍历数组

value in arr 遍历数组中的元素
(value, index) in arr 遍历数组中的元素和数组下标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <div class="box">
    <ul>
      <li v-for="value in arr">{{value}}</li>
      <br />
      　
      <li v-for="(value,index) in arr">{{value}}--{{index}}</li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    new Vue({
      el: ".box",
      data: {
        arr: ["哈哈", "嘻嘻", "哼哼"]
      }
    });
  </script>
</body>

v-for 遍历 json 对象

value in json 遍历 json 对象中的值
(value, key) in json 遍历 json 对象中的值和键
(value, key, index) in json 遍历 json 对象中的值、键和索引

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
  <div class="box">
    <ul>
      <li v-for="value in json">{{value}}</li>
      <br />
      <li v-for="(value,key) in json">{{value}}--{{key}}</li>
      <br />
      <li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    new Vue({
      el: ".box",
      data: {
        json: {
          baidu: "百度",
          souhu: "搜狐",
          sougou: "搜狗"
        }
      }
    });
  </script>
</body>

key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM

v-if 与 v-for 的优先级

  1. v-for 优先于 v-if 被解析
  2. 如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
  3. 要避免出现这种情况，则在外层嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环
  4. 如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项

v-if 与 v-show 的区别

  • v-if 是真正的条件渲染，直到条件第一次变为真时，才会开始渲染。
  • v-show 不管初始条件是什么会渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。

注意：v-if 适用于不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。