vue 数组删除(对象)单条删除,多条删除

1、数组单行删除

<!--
 * @Descripttion:单行删除
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-06-01 17:30:04
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-06-01 17:30:04
-->
    // 数据源
    demoData: [
      {
        id: '1',
        name: '张三',
      },
      {
        id: '2',
        name: '李四',
      },
      {
        id: '3',
        name: '王五',
      },
     
    ],
	methods: {
	  demo() {
	    console.log('全部数据 3条')
	    console.log(this.demoData)
	    //? 单选
	    //! 删除单行数据
	    const del = '3'
	    this.demoData = this.demoData.filter((o) => {
	      return o.id !== del
	    })
	    console.log('删除单行所返回的数据 4条')
	    console.log(this.demoData)
	  },
},

2,数组多行删除(同一数据源)

<!--
     * @Descripttion:单行删除
     * @version: 0.0.1
     * @Author: PengShuai
     * @Date: 2022-06-09 14:17:04
     * @LastEditors: PengShuai
     * @LastEditTime: 2022-06-09 14:17:04
    -->
    demo() {
      console.log('原数据')
      console.log(this.demoData)
      //? 多选
      //! 删除多行数据
      const selectData = [
        {
          id: '1',
          name: '张三',
        },
        {
          id: '4',
          name: '李四',
        },
      ]
      console.log('删除数据')
      console.log(selectData)
      let newData = this.demoData.filter(
        (a) => !selectData.some((b) => a.id === b.id)
      )
      console.log('删除后数据')
      console.log(newData)
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要安装 `pinia` 和 `axios`,可以使用以下命令: ```bash npm install pinia axios --save ``` 接着,我们需要创建一个 `store` 文件夹,并在其中创建一个名为 `search.ts` 的文件。在 `search.ts` 中,我们将创建一个 `SearchStore` 类,用于管理搜索页面的数据。 ```typescript import { defineStore } from 'pinia'; import axios from 'axios'; interface HistoryItem { value: string; timestamp: number; } export const useSearchStore = defineStore({ id: 'search', state: () => ({ keyword: '', history: [] as HistoryItem[], }), getters: { isKeywordEmpty: (state) => state.keyword.trim() === '', hasHistory: (state) => state.history.length > 0, historyList: (state) => { return state.history.sort( (a, b) => b.timestamp - a.timestamp ).map(item => item.value) }, }, actions: { setKeyword(keyword: string) { this.keyword = keyword; }, addHistoryItem(keyword: string) { const timestamp = new Date().getTime(); const item: HistoryItem = { value: keyword, timestamp }; this.history.unshift(item); }, removeHistoryItem(index: number) { this.history.splice(index, 1); }, clearAllHistory() { this.history = []; }, async search() { const { data } = await axios.get('https://api.pinduoduo.com/api/gindex/search', { params: { keyword: this.keyword } }); return data; } } }); ``` 在上面的代码中,我们定义了一个 `SearchStore` 类,其中包含以下属性和方法: - `keyword`:当前的搜索关键字。 - `history`:历史记录列表,每个记录包含一个值和一个时间戳。 - `isKeywordEmpty`:是否当前的搜索关键字为空。 - `hasHistory`:是否存在历史记录。 - `historyList`:历史记录列表,仅包含值。 - `setKeyword`:设置当前的搜索关键字。 - `addHistoryItem`:向历史记录列表添加一个新的记录。 - `removeHistoryItem`:删除指定索引的历史记录。 - `clearAllHistory`:删除所有历史记录。 - `search`:执行搜索操作,并返回搜索结果。 接下来,我们需要在搜索页面中使用 `SearchStore`。我们将创建一个名为 `Search.vue` 的文件,并在其中使用 `useSearchStore` hook。 ```vue <template> <div class="search"> <div class="search-bar"> <input type="text" v-model.trim="keyword" @input="onInput" /> <button class="search-btn" @click="onSearch" :disabled="isKeywordEmpty">搜索</button> </div> <div class="history" v-show="hasHistory"> <div class="title">历史记录</div> <div class="list"> <div class="item" v-for="(item, index) in historyList" :key="item" @click="onHistoryItemClick(item)"> <span>{{ item }}</span> <i class="iconfont icon-delete" @click.stop="removeHistoryItem(index)" /> </div> </div> <div class="clear-all" @click="clearAllHistory">清空历史</div> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useSearchStore } from '@/store/search'; export default defineComponent({ name: 'Search', setup() { const searchStore = useSearchStore(); const keyword = searchStore.keyword; const historyList = searchStore.historyList; const isKeywordEmpty = searchStore.isKeywordEmpty; const hasHistory = searchStore.hasHistory; function onInput(e: InputEvent) { searchStore.setKeyword((e.target as HTMLInputElement).value); } function onSearch() { if (!isKeywordEmpty) { searchStore.addHistoryItem(keyword); searchStore.search().then((data) => { console.log(data); }); } } function onHistoryItemClick(item: string) { searchStore.setKeyword(item); onSearch(); } function removeHistoryItem(index: number) { searchStore.removeHistoryItem(index); } function clearAllHistory() { searchStore.clearAllHistory(); } return { keyword, historyList, isKeywordEmpty, hasHistory, onInput, onSearch, onHistoryItemClick, removeHistoryItem, clearAllHistory, }; }, }); </script> ``` 在上面的代码中,我们使用 `useSearchStore` hook 创建了一个 `searchStore` 实例,并从中获取了一些属性和方法,例如 `keyword`、`historyList`、`isKeywordEmpty`、`hasHistory`、`setKeyword`、`addHistoryItem`、`removeHistoryItem`、`clearAllHistory` 和 `search`。我们还定义了一些组件的事件处理函数,例如 `onInput`、`onSearch`、`onHistoryItemClick`、`removeHistoryItem` 和 `clearAllHistory`。 最后,我们需要在 `main.ts` 中注册 `pinia`。 ```typescript import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.mount('#app'); ``` 现在,我们已经完成了使用 `pinia` 和 `axios` 编写拼多多搜索页面的本地存储、历史记录添加到第一条、长按删除删除所有、更多展示功能的实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值