列表渲染

v-for

  • 通过 v-for 遍历数组或对象,然后动态的渲染对应的DOM结构。
基本使用
  • 遍历数组、遍历对象、遍历数字
  • 	<template id="my-app">
          <!-- 遍历数组 -->
          <ul>
              <li v-for="movie,index in movies">{{movie}} {{index}}</li>
          </ul>
    
          <!-- 遍历对象 -->
          <h2>个人信息</h2>
          <ul>
              <li v-for="value,key,index in info">{{value}}-{{key}}-{{index}}</li>
          </ul>
    
          <h2>遍历数字</h2>
          <ul>
              <li v-for="num,index in 10">{{num}}-{{index}}</li>
          </ul>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
          const App = {
              template: '#my-app',
              data() {
                  return {
                      movies: [
                          '大话西游',
                          '穿越火线',
                          '盗梦空间',
                          '家有儿女'
                      ],
                      info: {
                          name: "why",
                          age: 18,
                          height: 1.88
                      }
                  };
              }
          }
          Vue.createApp(App).mount("#app");
      </script>
    
  • 显示结果:image.png
v-for 和 template 结合使用
  • 因为 v-for 是指令,必须作用在标签上。
  • 如果,我们每次渲染多个元素,而不想使用div包裹。可以通过template标签包裹。
  • template 标签不会被渲染

以列表为例(ul>li)

  • 	<template id="my-app">
          <ul>
              <template v-for="(value,key) in info">
                  <li>{{key}}</li>
                  <li>{{value}}</li>
                  <br>
              </template>
          </ul>
      </template>
      info: {
          name: "why",
          age: 18,
          height: 1.88
      }
    
  • 渲染结果:image.png
v-for 结合 数组 响应式渲染
  • 数组能被响应式监听的方法
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
  • 当数组改变后,v-for 会自动地重新渲染,当为 标签提供共一个key可以提高渲染速率

以动态修改电影列表为例

  • 	<template id="my-app">
          <ul>
              <li v-for="movie,index in movies">{{movie}} {{index}}</li>
          </ul>
    
          <label for="添加电影"></label>
          <input type="text" v-model="newMovies" @keyup.enter="addMovies">
      </template>
      newMovies: "",
      movies: [
          '大话西游',
          '穿越火线',
          '盗梦空间',
          '家有儿女'
      ],
    
  • image.png
  • 啪一下就动态渲染出刚添加地电影了