网页制作图片滚动_芒果视频怎样下载到本地_郑州百度推广开户_互联网营销师培训学校

1、先上一张效果图：

2、再上一个代码：

<template><div><h1>Array Test</h1><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul><div style="display: flex; flex-direction: column; height: 200px; justify-content: space-between;"><button @click="items.push({ id: 4, name: `Item ${items.length + 1}` })">Add Item</button><button @click="filterTest">filter return</button><button @click="forEachTest">forEach</button><button @click="mapTest">Map return</button></div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";const items = ref([{ id: 1, name: "Item 1" },{ id: 2, name: "Item 2" },{ id: 3, name: "Item 3" },
]);function filterTest() {const filtered = items.value.filter((item) => item.id > 2);console.log(filtered);
}function forEachTest() {items.value.forEach((item) => {console.log(item.name);});
}function mapTest() {const mapped = items.value.map((item) => {return {...item,name: item.name.toUpperCase(),};});console.log(mapped);
}
</script>
<style scoped></style>

3、说明：

filter：根据条件来过滤，并且返回一个过滤以后的数组。

map：遍历数组，并处理数据 ，返回一个处理后的数组。

forEach：只是作遍历，不带返回值，但可以进行一些操作。