vue实现文本列表
Vue 实现文本列表的方法
使用 v-for 指令渲染列表
在 Vue 中，v-for 指令可以用于渲染列表数据。以下是一个基本示例：
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
}
}
</script>动态绑定列表数据
可以通过方法或计算属性动态生成列表数据：
<template>
<div>
<ul>
<li v-for="(item, index) in filteredItems" :key="index">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
computed: {
filteredItems() {
return this.items.filter(item => item.includes('Item'))
}
}
}
</script>使用组件渲染列表
对于复杂的列表项，可以使用组件：
<template>
<div>
<list-item
v-for="(item, index) in items"
:key="index"
:item="item"
/>
</div>
</template>
<script>
import ListItem from './ListItem.vue'
export default {
components: { ListItem },
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
}
}
</script>添加列表交互功能
可以为列表项添加点击事件或其他交互：
<template>
<div>
<ul>
<li
v-for="(item, index) in items"
:key="index"
@click="handleClick(item)"
>
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
},
methods: {
handleClick(item) {
console.log('Clicked:', item)
}
}
}
</script>使用过渡效果
Vue 的过渡组件可以为列表添加动画效果：
<template>
<div>
<transition-group name="fade" tag="ul">
<li
v-for="(item, index) in items"
:key="index"
>
{{ item }}
</li>
</transition-group>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>实现可排序列表
使用第三方库如 vuedraggable 可以实现可排序列表：
<template>
<div>
<draggable v-model="items" tag="ul">
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3']
}
}
}
</script>
