当前位置：首页 > VUE

vue实现竖向列表

2026-01-17 14:55:17VUE

Vue 实现竖向列表的方法

使用 v-for 指令

通过 Vue 的 v-for 指令可以轻松渲染一个竖向列表。假设有一个数组 items，可以通过以下方式渲染：

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

使用 CSS 控制样式

为了让列表更美观，可以通过 CSS 控制样式。例如，去除默认的列表样式并添加间距：

<template>
  <div>
    <ul class="vertical-list">
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<style>
.vertical-list {
  list-style: none;
  padding: 0;
}
.vertical-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>

动态加载数据

如果数据是异步加载的，可以通过 axios 或其他 HTTP 客户端获取数据并更新列表：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    }
  },
  async created() {
    const response = await axios.get('https://api.example.com/items');
    this.items = response.data;
  }
}
</script>

添加交互功能

可以为列表项添加点击事件或其他交互功能：

<template>
  <div>
    <ul>
      <li 
        v-for="(item, index) in items" 
        :key="index"
        @click="handleItemClick(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('Clicked:', item);
    }
  }
}
</script>

使用组件化

如果列表项较复杂，可以将列表项提取为单独的组件：

<template>
  <div>
    <ul>
      <ListItem 
        v-for="(item, index) in items" 
        :key="index"
        :item="item"
        @item-clicked="handleItemClick"
      />
    </ul>
  </div>
</template>

<script>
import ListItem from './ListItem.vue';

export default {
  components: { ListItem },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  },
  methods: {
    handleItemClick(item) {
      console.log('Clicked:', item);
    }
  }
}
</script>

列表项组件 (ListItem.vue)

<template>
  <li @click="handleClick">
    {{ item }}
  </li>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    handleClick() {
      this.$emit('item-clicked', this.item);
    }
  }
}
</script>

通过以上方法，可以灵活地实现 Vue 中的竖向列表，并根据需求扩展功能。

vue实现竖向列表