vue实现文本列表

Vue 实现文本列表的方法

Vue 可以通过多种方式实现文本列表的渲染和管理，以下是几种常见的方法：

使用 v-for 指令渲染列表

通过 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 items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
    <input v-model="newItem" placeholder="输入新项">
    <button @click="addItem">添加</button>
  </div>
</template>

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

使用计算属性过滤或排序列表

通过计算属性可以对列表数据进行处理，例如过滤或排序。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索">
    <ul>
      <li v-for="(item, index) in filteredItems" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Orange', 'Mango'],
      searchQuery: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item =>
        item.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以通过 ref 或 reactive 结合 setup 函数实现列表管理。

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3'])
    const newItem = ref('')

    const addItem = () => {
      if (newItem.value.trim()) {
        items.value.push(newItem.value.trim())
        newItem.value = ''
      }
    }

    return {
      items,
      newItem,
      addItem
    }
  }
}
</script>

使用 Vue 组件拆分列表项

可以将列表项拆分为单独的组件，提高代码复用性和可维护性。

<template>
  <div>
    <ul>
      <ListItem
        v-for="(item, index) in items"
        :key="index"
        :item="item"
        @remove="removeItem(index)"
      />
    </ul>
    <input v-model="newItem" placeholder="输入新项">
    <button @click="addItem">添加</button>
  </div>
</template>

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

export default {
  components: { ListItem },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem.trim())
        this.newItem = ''
      }
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用 Vuex 或 Pinia 管理列表状态

对于复杂应用，可以通过状态管理工具（如 Vuex 或 Pinia）集中管理列表数据。

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

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      newItem: ''
    }
  },
  computed: {
    ...mapState(['items'])
  },
  methods: {
    ...mapActions(['addItem', 'removeItem']),
    addItem() {
      if (this.newItem.trim()) {
        this.$store.dispatch('addItem', this.newItem.trim())
        this.newItem = ''
      }
    }
  }
}
</script>

以上方法可以根据项目需求选择适合的实现方式。