vue实现列表demo
Vue 列表实现基础示例
以下是一个基于 Vue 3 的列表渲染基础实现方案，包含常见功能如数据绑定、事件处理和动态样式。
模板部分
<template>
<div>
<h3>商品列表</h3>
<ul>
<li v-for="(item, index) in items"
:key="item.id"
:class="{ 'active': item.isActive }"
@click="toggleActive(index)">
{{ item.name }} - ￥{{ item.price }}
</li>
</ul>
</div>
</template>脚本部分
<script>
import { ref } from 'vue'
export default {
setup() {
const items = ref([
{ id: 1, name: '笔记本电脑', price: 5999, isActive: false },
{ id: 2, name: '智能手机', price: 3999, isActive: false },
{ id: 3, name: '无线耳机', price: 699, isActive: false }
])
const toggleActive = (index) => {
items.value[index].isActive = !items.value[index].isActive
}
return { items, toggleActive }
}
}
</script>样式部分
<style scoped>
.active {
background-color: #f0f0f0;
font-weight: bold;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px 12px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
</style>进阶功能实现方案
带筛选功能的列表
const searchQuery = ref('')
const filteredItems = computed(() => {
return items.value.filter(item =>
item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})分页控制实现
const currentPage = ref(1)
const itemsPerPage = 5
const paginatedItems = computed(() => {
const start = (currentPage.value - 1) * itemsPerPage
return filteredItems.value.slice(start, start + itemsPerPage)
})性能优化建议
使用 v-for 时始终指定唯一的 :key 属性，推荐使用 ID 而非索引
大数据量场景考虑使用虚拟滚动技术，可借助第三方库如 vue-virtual-scroller
复杂列表操作建议使用 Vuex 或 Pinia 进行状态管理
常见问题解决方案
列表更新不渲染时，确保使用响应式 API（ref/reactive）声明数据源
动态添加列表项时，避免直接修改数组，使用数组变更方法或解构赋值
// 正确方式
items.value = [...items.value, newItem]
// 或
items.value.push(newItem)跨组件传递列表数据时，优先使用 props/emit 或 provide/inject
