Vue 循环遍历 v-for

时间：2024-03-11 12:12:30

v-for遍历数组

  • 渲染一组数据的时候用 v-for
  • v-for的语法类似于JavaScript中的for循环
  • 格式如下：item in items的形式

我们来看一个简单的案例：

如果在遍历的过程中不需要使用索引值

  • v-for="movie in movies"
  • 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

  • 语法格式：v-for=(item, index) in items
  • 其中的index就代表了取出的item在原数组的索引值。

v-for可以用户遍历对象：

  • 比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。
<div id="app">
  <ul>
    <li v-for="(value, key, index) in info">
      {{index}}-{{value}}-{{key}}
    </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>

Array: (item,index) in Array

  • item 是数组的遍历
  • index 是数组的索引
  • 可以用其它的参数代替，但是在后面也得写成一样的参数，尽量避免命名的冲突

更改数组

  1. 不能通过索引的方式更改数组，这样不会渲染页面
  2. 不能通过更改长度的方式更改数组，也不会渲染页面

检测数组更新

  • 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

  • Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

obj: (value,key,index) in obj

  • value 对象的 value 值
  • key 对象的 key 值
  • index 对象的索引

更改对象

  1. 向对象内添加或者删除属性不会渲染页面
  2. 使用$set()方法
    • 语法this.$set(obj, key, value)
      - obj： 需要修改的对象
      - key: 对象的key值
      - value： 想添加或者修改的值
      - 将 key 值改成索引也客园修改数组
  3. Object.defineProperty

num:num is number

从 1 开始遍历到这个数字

String

遍历字符串的全部字母

key属性

  • 只能用在Array和string中,值是唯一的
  • vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去
  • 在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识
  • 给key赋值的内容不能是可变的，可以用索引添加
  1. 在写v-for的时候，都需要给元素加上一个key属性
  2. key的主要作用就是用来提高渲染性能的！
  3. key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）

注意，千万不要将 v-for 和 v-if 一起使用。

<div v-for=\'item in datas\' v-if=\'isShow\'></div>
  • v-for 的优先级始终比 v-if 高，无论先后顺序。
  • 所以两个指令同时存在时总是先生成迭代逻辑，再在迭代逻辑中进行genIf的处理，最后在整个迭代里每项都进行一次判断，对性能造成浪费。
  • 将v-if提取到v-for之外，如果判断参数出现在迭代数据项里，可以结合computed来过滤迭代项后再进行渲染。

相关文章