我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

1.用于展示列表数据

2.语法: v-for=" (item, index) in xx

3可遍历:数组、对象、字符串、指定次数(后两个用的比较少)

 <div id="user">
        <ul>
            <!-- v-for这里可以写俩参数接受值,key代表唯一表示 -->
            <!-- 遍历数组 -->
            <h2>学生信息</h2>
            <li v-for='(p,index) in persons' :key="index">{{p.name}}-{{p.age}}岁----{{index}}</li>
        </ul>
        <ul>
            <!-- 遍历对象 -->
            <h2>汽车信息</h2>
            <li v-for='(value,keys) in car'>{{value}}---{{keys}}</li>
        </ul>
        <ul>
            <!-- 遍历字符串 -->
            <h2>遍历字符串</h2>
            <li v-for='(value,keys) in str'>{{value}}---{{keys}}</li>
            <!-- 遍历指定次数 -->
            <h2>遍历指定次数</h2>
            <li v-for='(value,keys) of 5'>{{value}}---{{keys}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#user',
            data: {
                persons: [
                    { id: 001, name: '山鱼', age: 18 },
                    { id: 002, name: '龙猫', age: 19 },
                    { id: 003, name: '飞飞', age: 20 }
                ],
                car: {
                    name: '宝马',
                    numbers: '25W',
                    type: 'sr1000rr'
                },
                str:'I-LOVE-YOU'
            }
        })
    </script>

2.1v-for与对象

1.可以使用 v-for 来遍历一个对象的所有属性，遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>


data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

2.可以通过提供第二个参数表示属性名 (例如 key)：

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>
  1. 第三个参数表示位置索引
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

3.key的作用

3.1列表过滤

这里可以使用侦听器实现也可以使用计算属性实现，但是一般都是使用计算属性更简单一些

<body>
    <div id="user">
        <h1>人员列表</h1>
        <input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
        <ul>
            <li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
         const vm = new Vue({
            el: '#user',
            data: {
                // 1.收集用户的输入2.
                keyWord: '',
                persons: [
                    { id: '001', name: '马冬梅', age: 18, sex: '女' },
                    { id: '002', name: '周冬雨', age: 19, sex: '女' },
                    { id: '003', name: '周杰伦', age: 20, sex: '男' },
                    { id: '004', name: '温兆伦', age: 20, sex: '男' },
                ]
            },
            computed: {
                filpersons() {
                    return this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1;
                    }) 
                }
            }
        })
    </script>

3.2列表排序

列表排序是从列表过滤基础上添加的

<body>
    <div id="user">
        <h1>人员列表</h1>
        <button @click='sortType = 1'>升序</button>
        <button @click='sortType = 2'>降序</button>
        <button @click='sortType = 0'>原序</button>
        <input type="text" name="" id="" placeholder="输入搜索" v-model='keyWord'>
        <ul>
            <li v-for='p of filpersons' :key='p.id'>{{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
        // 使用计算属性实现列表过滤
        const vm = new Vue({
            el: '#user',
            data: {
                // 1.收集用户的输入2.
                keyWord: '',
                sortType: 0,// 0代表原顺序，1代表升序，2代表降序
                persons: [
                    { id: '001', name: '马冬梅', age: 18, sex: '女' },
                    { id: '002', name: '周冬雨', age: 19, sex: '女' },
                    { id: '003', name: '周杰伦', age: 20, sex: '男' },
                    { id: '004', name: '温兆伦', age: 20, sex: '男' },
                ]
            },
            computed: {
                filpersons() {
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1;
                    })
                    if (this.sortType) {
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr;
                }
            }
        })
        var arr = [1, 2, 3, 4];
        arr.sort((p1, p2) => {
            return this.sortType === 1 ? p2 - p1 : p1 - p2
        })
    </script>
</body>

3.3vue.set的使用

vue.set的三个参数分别是（给谁添加，添加什么，添加的值是啥）

使用$set也可以实现该功能

局限性：在这里set方法只能给Vue实例对象里面的data内的对象添加属性，不可以直接给data添加属性

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue