当前位置：首页 > VUE

vue实现新建列表

2026-01-18 13:56:40VUE

Vue 实现新建列表的方法

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

使用 v-for 动态渲染列表

通过数据驱动视图的方式，利用 v-for 指令动态渲染列表项。定义一个数组作为数据源，通过方法向数组中添加新项。

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

<script>
export default {
  data() {
    return {
      items: ['项目1', '项目2']
    }
  },
  methods: {
    addItem() {
      this.items.push(`项目${this.items.length + 1}`)
    }
  }
}
</script>

使用表单输入创建新列表项

结合表单输入框，让用户自定义新列表项的内容。

<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 {
      items: [],
      newItem: ''
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    }
  }
}
</script>

使用 Vuex 管理列表状态

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

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

// 组件中
<template>
  <div>
    <input v-model="newItem">
    <button @click="addNewItem">添加</button>
    <ul>
      <li v-for="(item, index) in $store.state.items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    addNewItem() {
      this.$store.dispatch('addItem', this.newItem)
      this.newItem = ''
    }
  }
}
</script>

使用组件化方式构建列表

将列表项封装为单独组件，提高代码复用性。

// ListItem.vue
<template>
  <li>{{ item }}</li>
</template>

<script>
export default {
  props: ['item']
}
</script>

// ParentComponent.vue
<template>
  <div>
    <button @click="addItem">添加项目</button>
    <ul>
      <list-item v-for="(item, index) in items" :key="index" :item="item" />
    </ul>
  </div>
</template>

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

export default {
  components: { ListItem },
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push(`新项目${this.items.length + 1}`)
    }
  }
}
</script>

以上方法可以根据具体需求选择或组合使用，实现 Vue 中的新建列表功能。

vue实现新建列表