Vue教程0207-Vue列表渲染

watchping

已于 2023-02-12 10:00:33 修改

阅读量312

点赞数

分类专栏：前端Vue教程 # Vue基础文章标签： vue.js javascript 前端

于 2023-02-11 16:59:52 首次发布

本文链接：https://blog.csdn.net/watchping/article/details/128985413

版权

前端Vue教程同时被 2 个专栏收录

10 篇文章 3 订阅

订阅专栏

Vue基础

8 篇文章 0 订阅

订阅专栏

Vue列表渲染

1.指令v-for-遍历数组
2.指令v-for遍历对象中每个属性
3.指令v-for-数数
4.指令v-for-遍历对象数组
5.指令v-for使用要点

1.指令v-for-遍历数组

反复生成多个相同结构的HTML元素
用法：

<要反复生成的元素 v-for="(item, index) of 数组"/>

原理:

当new Vue()扫描到这里时，自动遍历of后的数组中每个元素
每遍历一个元素，就创建一个当前HTML 元素的副本
of前的两个变量:item会自动获得当前正在遍历的数组元素值，index会自动获得当前正在遍历的下标位置
如果当前元素或子元素中，需要使用当前正在遍历的元素值或下标，可用绑定语法来绑定item和index的值。

强调:

v-for一定要放在那个要反复生成的元素上，而不是放在父元素上！
item和index的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用！

案例
显示数组各元素的内容，遍历数组元素，反复生成多个相同结构的元素。
参考代码如下：

<body>
  <div id="app">
    <ul>
      <!--本例中: 因为要反复生成多个li，所以v-for要写在li上，而不是li的父元素ul上-->
      <li v-for="(value,i) of cellphone" :key="i">
        手机品牌{{i+1}}: {{value}}
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        cellphone: ["华为", "苹果", "小米", "三星"],
      },
    });
  </script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#用-v-for-把一个数组对应为一组元素

2.指令v-for遍历对象中每个属性

v-for还可以遍历对象中每个属性，反复生成多个html元素。

案例
显示一个商品对象的所有属性值，参考代码如下：

<body>
  <div id="app">
    <!--希望遍历data中一个对象的每个属性，反复生成多个相同结构的HTML元素-->
    <ul>
      <li v-for="(value,key) of goods" :key="key">{{key}} : {{value}}</li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        goods: {
          id: 11,
          name: "华为手机",
          title: "2022新款 爆销售202220222022",
          price: 12.78,
        },
      },
    });
  </script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#在-v-for-里使用对象

3.指令v-for-数数

指令v-for还可以数数: 给v-for指定一个数字，他可以生成从1开始依次递增的一个序列！

<要反复生成的元素 v-for="index of 数字"/>

案例
根据页数生成指定个数的分页按钮，参考代码如下：

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    ul {
      list-style: none;
    }
    ul>li {
      margin: 2px;
      float: left;
      border: 1px solid #555;
      width: 36px;
      height: 36px;
      line-height: 36px;
      text-align: center;
    }
  </style>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="i of pageCount" :key="i">{{i}}</li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        pageCount: 7,
      },
    });
  </script>
</body>

官网学习
https://cn.vuejs.org/v2/guide/list.html#在-v-for-里使用值范围

4.指令v-for-遍历对象数组

在实践中用的比较多的是遍历对象数组，对象数组页是一个数组，其数组元素的类型是对象，比如购物车数组，其元素是一个个的商品对象。

案例
显示购物车商品信息，参考代码如下：

<body>
  <div id="app">
    <h3>总计: ¥{{total.toFixed(2)}}</h3>
    <ul>
      <li v-for="(item,i) of cart" :key="i">
        {{item.pid}} | {{item.pname}} | ¥{{item.price.toFixed(2)}} |
        {{item.count}} —— 小计：¥{{(item.price*item.count).toFixed(2)}}
      </li>
    </ul>
    <h3>总计: ¥{{total.toFixed(2)}}</h3>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        cart: [
          { pid: 1, pname: "华为", price: 4455, count: 2 },
          { pid: 2, pname: "小米", price: 3455, count: 1 },
          { pid: 3, pname: "OPPO", price: 3356, count: 3 },
        ],
      },
      methods: {
        //方法
      },

      computed: {
        //属性，所以用法同属性的用法——一定不要不加()
        total() {
          console.log("调用了一次total()");
          var sum = 0;
          for (var p of this.cart) {
            sum += p.price * p.count;
          }
          return sum;
        },
      },
    });
    //测试: 在F12->console->vm.cart[1].count++
  </script>
</body>

5.指令v-for使用要点

指令v-for要放在那个要反复生成的元素上，而不是放在父元素上
指令v-for遍历用到的参数使用范围是局部的

指令v-for遍历用到的参数item和index的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用。

不能用下标直接更改数组值

使用v-for时，这里有个坑:

如果v-for遍历的是数组，在程序中通过下标修改数组元素的值，页面上的HTML元素不会自动更改！
比如: this.teachers[0]=“燕儿”
页面上是不会变的！因为数组中的数字类型的下标0、1、2…无法添加访问器属性，也就不受监控！

解决:

vue中修改数组中的元素值！必须用数组函数！才能自动更新页面。因为函数都是受监控的。
比如: this.teachers.splice(0,1,“燕儿”)
删除0位置的1个元素，再在0位置放入值"燕儿"
结果: 页面会自动变化！

官网学习
https://cn.vuejs.org/v2/guide/reactivity.html#对于数组

指令v-for的使用需要加key属性

其实每次使用v-for时，都要同时绑定:key=“index”。因为v-for反复生成的多个元素，除了内容不同之外，从元素属性上来看多个元素毫无差别！每个反复生成的元素都是一样的。所以，如果将来修改了数组中一个元素时，v-for因为无法识别每个HTML元素，所以只能把所有的HTML元素重新生成一遍——效率低！

如果给每个元素都绑定:key="index"属性，则每个HTML元素上都有一个唯一的标识key=“0” key=“1” … 。当将来修改了数组中每个位置的元素时，只需要修改对应key的HTML元素即可，其他HTML元素保持不变！——效率高！

1). 当遍历数组时: <元素 v-for=“(item,index) of 数组” :key=“index” />

Key的值依次是0 1 2 3…

2). 当遍历对象时: <元素 v-for=“(value,key) of 对象” :key=“key”

Key的值依次是: 属性名1 属性名2 …

因为一个对象内的属性名肯定不会重复，所以，属性名也可以当做:key唯一标识一个HTML元素

官网学习
https://cn.vuejs.org/v2/guide/list.html#在组件上使用-v-for