《Vue零基础入门教程》第十四课：列表渲染

news2024/12/26 19:57:06

往期内容

《Vue零基础入门教程》第六课：基本选项

《Vue零基础入门教程》第八课：模板语法

《Vue零基础入门教程》第九课：插值语法细节

《Vue零基础入门教程》第十课：属性绑定指令

《Vue零基础入门教程》第十一课：事件绑定指令

《Vue零基础入门教程》第十二课：双向绑定指令

《Vue零基础入门教程》第十三课：条件渲染

1) 什么是列表渲染

列表渲染也称"循环渲染", 通过v-for遍历数组或者对象

2) 遍历数组

获取元素

如果只希望得到每个数组元素的值, 不需要得到下标

语法

v-for="item in items"

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <!-- 在指令表达式中, in前面的参数表示数组元素 -->
        <!-- <li v-for="item in items">{{item}}</li> -->
        <!-- (元素, 下标) in 数组 -->
        <li v-for="(value, key) in items">{{key}} -- {{value}}</li>
      </ul>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            items: ['test1', 'test2', 'test3'],
          }
        },
      }).mount('#app')
    </script>
  </body>
</html>

获取元素和下标

如果只希望得到每个数组元素的值和下标

语法

v-for="(item, index) in items"

3) 遍历对象

只取值: v-for="value in obj"
取键和值: v-for="(value, key) in obj"
取键和值和索引: v-for="(value, key, index) in obj"

4) 绑定key

在遍历时, 通常会给每个渲染的元素绑定一个唯一值key

什么是key

key是Vue内置的属性, 不会渲染到DOM中

语法

<li v-for="item in items" :key="item.id">

key的作用

key是vue给每个元素定义的唯一标识, 来用复用DOM

💡 需求

制作一个人员列表, 如下

在输入框中依次输入对应的名字
当点击按钮时, 在列表的最上方添加一个用户: 小强

示例


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>用户列表</h1>
      <button @click="addUser">添加一个用户</button>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{user.name}}
          <input type="text" />
        </li>
      </ul>
    </div>

    <script>
      const { createApp } = Vue

      const vm = createApp({
        data() {
          return {
            users: [
              { id: 1, name: '小明' },
              { id: 2, name: '小美' },
              { id: 3, name: '小胖' },
            ],
          }
        },
        methods: {
          addUser() {
            this.users.unshift({ id: 4, name: '小强' })
          },
        },
      }).mount('#app')
    </script>
  </body>
</html>

期望的结果