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

embedded/2024/11/29 3:12:31/

简介

在 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 作为示例数据：

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

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

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

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

unshift(): 向数组的开头添加一个或多个元素，并返回新的长度。
```
javascript">this.list.unshift(0); // 结果: 6, list: [0, 1, 2, 3, 4]
```

shift(): 移除数组的第一个元素，并返回该元素。

javascript">const firstItem = this.list.shift(); // 结果: 0

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

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

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

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

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

javascript">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>javascript">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>