vue实现列表添加

Vue 实现列表添加功能

在 Vue 中实现列表添加功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 指令和数组方法

通过 v-for 指令渲染列表，结合数组的 push 方法添加新项。

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

<script>
export default {
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem.trim())
        this.newItem = ''
      }
    }
  }
}
</script>

使用计算属性实现表单验证

在添加前验证输入内容，确保非空或符合特定规则。

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

<script>
export default {
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  computed: {
    isValid() {
      return this.newItem.trim().length > 0
    }
  },
  methods: {
    addItem() {
      this.items.push(this.newItem.trim())
      this.newItem = ''
    }
  }
}
</script>

使用 Vuex 管理状态

对于大型应用，可以使用 Vuex 集中管理列表状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item)
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('addItem', item)
    }
  }
})

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

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

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

使用 Composition API

在 Vue 3 中，可以使用 Composition API 实现类似功能。

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const newItem = ref('')
    const items = ref([])

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

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

以上方法涵盖了 Vue 2 和 Vue 3 中实现列表添加的常见场景，可以根据具体需求选择适合的方式。