当前位置：首页 > article >正文

Vue.js 中 v-for 指令与 JavaScript 数组方法

article 2024/11/29 3:11:14

简介

在 Vue.js 中，v-for 指令是渲染列表数据的利器。它能够让你轻松地根据数组或对象渲染一个列表。本文将首先展示 v-for 的基本用法，然后详细介绍 JavaScript 数组的常用方法，并提供示例，展示如何在 Vue.js 应用中操作数组。

一、Vue.js 的 v-for 指令

v-for 指令允许你基于数组或对象的每个元素来重复渲染一个元素。它接收三个参数：元素的值、元素的索引和源数据数组本身。

基本用法：

<div v-for="(item, index) in items" :key="index">
  {{ item }}
</div>

这里，items 是源数据数组，item 是当前元素的值，index 是当前元素的索引。

二、JavaScript 数组方法

在介绍这些方法之前，我们先定义一个初始数组 list 和一个对象数组 persons 作为示例数据：

data() {
    return {
        list: [1, 2, 3, 4, 5], // 初始数组数据
        persons: [
            {"name": "Monki", "num": "151xxxxxxxx"},
            {"name": "Bei", "num": "151xxxxxxxxx"}
        ] // 初始对象数组数据
    }
}

push(): 向数组末尾添加一个或多个元素，并返回新的长度。
```
this.list.push(6); // 结果: [1, 2, 3, 4, 5, 6]
```

pop(): 移除数组的最后一个元素，并返回该元素。

const lastItem = this.list.pop(); // 结果: 5, list: [1, 2, 3, 4]

unshift(): 向数组的开头添加一个或多个元素，并返回新的长度。
```
this.list.unshift(0); // 结果: 6, list: [0, 1, 2, 3, 4]
```
shift(): 移除数组的第一个元素，并返回该元素。
```
const firstItem = this.list.shift(); // 结果: 0
```

splice(): 用于添加/删除数组中的元素。

this.list.splice(1, 2, 'a', 'b'); // 结果: [1, 'a', 'b', 4]

sort(): 对数组的元素进行排序。

this.list.sort((a, b) => a - b); // 结果: [1, 2, 3, 4]

reverse(): 将数组中的元素顺序颠倒。

this.list.reverse(); // 结果: [4, 3, 2, 1]

三、Vue.js 应用示例

以下是一个简单的 Vue.js 应用示例，展示了如何使用 v-for 指令和数组方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js v-for Example</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
    <button @click="click">逆序</button>
    <button @click="popOne">删除一个</button>
    <div v-for="item in list">
        {{item}}
    </div>
    <div v-for="(item,index) in persons">
        {{item.name}}---{{index}}---
        {{item.num}}
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                list: [1, 2, 3, 4, 5],
                persons: [
                    {"name": "Monki", "num": "151xxxxxxxx"},
                    {"name": "Bei", "num": "151xxxxxxxxx"}
                ]
            }
        },
        methods:{
            click(){
                this.list.reverse();
                this.persons.reverse();
            },
            popOne(){
                this.list.pop();
                this.persons.pop();
            }
        }
    }
    Vue.createApp(App).mount("#Application");
</script>
</body>
</html>