vue实现功能列表

Vue 实现功能列表的方法

使用 Vue 实现功能列表可以通过多种方式完成，以下是一些常见的方法和示例代码。

使用 v-for 渲染列表

通过 v-for 指令可以动态渲染列表数据，结合 :key 提升性能。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '功能1' },
        { id: 2, name: '功能2' },
        { id: 3, name: '功能3' }
      ]
    }
  }
}
</script>

动态添加和删除列表项

通过方法修改数据数组，实现动态增删功能。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ item.name }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <input v-model="newItem" placeholder="输入新功能">
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '功能1' },
        { id: 2, name: '功能2' }
      ],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push({
          id: Date.now(),
          name: this.newItem
        })
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用计算属性过滤列表

通过计算属性实现列表的过滤或排序功能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索功能">
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '搜索功能' },
        { id: 2, name: '添加功能' },
        { id: 3, name: '删除功能' }
      ],
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.name.includes(this.searchQuery)
      )
    }
  }
}
</script>

使用 Vuex 管理列表状态

对于复杂应用，可以通过 Vuex 集中管理列表数据。

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['items'])
  }
}
</script>

使用第三方组件库

借助 Element UI 或 Ant Design Vue 等组件库快速实现功能列表。

<template>
  <el-table :data="items" style="width: 100%">
    <el-table-column prop="name" label="功能名称"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '功能1' },
        { id: 2, name: '功能2' }
      ]
    }
  },
  methods: {
    handleEdit(item) {
      console.log('编辑', item)
    },
    handleDelete(item) {
      console.log('删除', item)
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，灵活组合以实现更复杂的功能列表。