10 vue 指令 v-for

6/29/2021 vue

API — v-for (opens new window)

# 遍历数组

<div id="app">
  <!--1.在遍历的过程中,没有使用索引值(下标值)-->
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

  <!--2.在遍历的过程中, 获取索引值-->
  <ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['why', 'kobe', 'james', 'curry']
    }
  })
</script>

# 遍历对象


<div id="app">
  <!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value-->
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>


  <!--2.获取key和value 格式: (value, key) -->
  <ul>
    <li v-for="(value, key) in info">{{value}}-{{key}}</li>
  </ul>


  <!--3.获取key和value和index 格式: (value, key, index) -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }
  })
</script>

# 遍历使用 key

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素,你需要用特殊 attribute key 来提供一个排序提示:

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

e.g. 在数据中间插入元素时,指定 key 之后,渲染效率会更高。

key的作用主要是为了高效的更新虚拟DOM

vue 3.x | 列表渲染 | Vue.js (opens new window)

# 数组/列表中的哪些方法是响应式的

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

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

vue 3.x | 列表渲染 | Vue.js (opens new window)

使用索引修改不会触发响应式的改变

// 注意: 通过索引值修改数组中的元素,不是响应式的
this.letters[0] = 'bbbbbb';

// 以下操作是响应式的:
this.letters.splice(0, 1, 'bbbbbb') // 在索引 0 的位置,删除一个元素,并添加 'bbbbbb' 元素(替换第 0 个元素)
// set(要修改的对象, 索引值, 修改后的值)
Vue.set(this.letters, 0, 'bbbbbb')
更新时间: Tuesday, June 29, 2021 21:54