广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章带大家一起了解下Vue的列表渲染指令：v-for，希望给大家有所帮助！

⭐⭐ 个人感觉其实就是基础语法的for循环，使用上也差不多，只是形式不同罢了,理解会使用。（学习视频分享：vue视频教程）

使用方法;

1、遍历数组

v-for="item in 数组"

v-for="(item, index) in 数组"

对一个数组进行遍历实例：

<div class="item" v-for="item in products">    <h3 class="title">商品:{{item.name}}</h3>    <span>价格:{{item.price}}</span>    <p>秒杀：{{item.desc}}</p></div>const app = Vue.createApp({        data() {          return {            //2.数组 存放的是对象            products: [              { id: 11, name: "mac", price: 1000, desc: "99" },            ],          };        },      });app.mount("#app");

2、遍历对象 ⭐⭐ v-for也支持遍历对象，并且支持有一二三个参数：

v-for同时也支持数字的遍历： 每一个item都是一个数字；

<!-- 2.遍历对象 -->      <ul>        <li v-for="(value,key,index) in info">          {{value}} - {{key}} - {{index}}        </li>      </ul>  const app = Vue.createApp({        data() {          return {            info: { bame: "why", age: 18, height: 1.88 },          };        },      });app.mount("#app");

3、遍历字符串

<li v-for="item in 100">{{item}}</li>

⭐⭐ 我们可以使用templ元素来循环渲染一段包含多个元素的内容

为什么这里不使用div呢？

我之前学的时候也没有怎么考虑这个，整理笔记的时候发现了这个问题

原因：

其实，template的作用就是模板占位符，可以帮助我们包裹元素，在循环的过程总，template不会被渲染到页面上。

div(如果div没有实际的意义，那么可以使用template替换)

<div v-for="(value,key,index) in infos">        <span>{{value}}</span>        <strong>{{key}}</strong>        <i>{{index}}</i></div>

template

<template v-for="(value,key,index) in infos">        <span>{{value}}</span>        <strong>{{key}}</strong>        <i>{{index}}</i></template>

⭐⭐

Vue将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新

被包裹过的方法包括：

这些方法的用法其实在js中都是差不多的，用到的时候想起来再查查

替换数组的方法

//并不是完整写法！！！<li v-for="item in names">{{item}}</li>names: ["abc", "bac", "aaa", "cbb"],// 1.直接将数组修改为一个新的数组this.names = ["cc", "kk"];// 2.通过一些数组的方法，修改数组中的元素this.names.push("cc");this.names.pop();this.names.splice(2, 1, "cc");this.names.sort();this.names.reverse();

【相关视频教程推荐：vuejs入门教程、web前端入门】

以上就是浅析Vue的列表渲染指令：v-for的详细内容，更多请关注9543建站博客其它相关文章！