核心代码如下你试试，然后部分逻辑需要自己优化一下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>条件筛选</title> <style> ul { list-style: none; display: flex; flex-wrap: wrap; } li{ padding: 8px; white-space: nowrap; } </style> </head> <body> <div id="app"> <div class="filter-title">服务类型:</div> <ul class="nav filter-list" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false" @click.stop="handleSearchForm">全部</a> </li> <template v-for="(type,index) in options.mailServiceTypeList"> <li class="nav-item" role="presentation"> <a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="handleSearchForm(type)">{{type.name}}</a> </li> </template> </ul> <ul class="nav filter-list" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false">已选条件</a> </li> <template v-for="(type,index) in selectedRows"> <li class="nav-item" role="presentation"> <a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="remove(type)">{{type.name}}</a> </li> </template> </ul> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#app', data: function() { return { options: { mailServiceTypeList: [ {name: '全部', id: 1}, {name: '企业孵化', id: 2}, {name: '研发设计', id: 3}, {name: '检验检测', id: 4}, {name: '知识产权', id: 5}, {name: '技术转移', id: 6} ] }, // 已选条件 selectedRows: [] } }, methods:{ handleSearchForm: function (type) { // TODO: 这里记得做去重处理, 示例代码, 没有写 if(type) this.selectedRows.push(type) }, // 点击删除 remove: function(type){ var list = [] for(let item of this.selectedRows) { if(item.id!=type.id) list.push(type) } this.selectedRows = list } } }) </script> </body> </html>