vue 多选 /标签

一介俗人.....

已于 2024-05-06 18:21:06 修改

阅读量573

点赞数 20

文章标签： vue.js 前端 javascript

于 2024-04-19 18:26:08 首次发布

本文链接：https://blog.csdn.net/m0_59329255/article/details/137974002

版权

本文介绍如何在Vue项目中实现多选标签功能。通过v-for循环遍历数据，结合点击事件处理选中和取消选中状态，并将选中项存储在数组中，最后可以将数组转换为字符串。示例代码包括HTML结构、Vue数据和方法以及CSS样式。

摘要由CSDN通过智能技术生成

一、图例：

div：

<div class="main">

<div class="tagBox">



<div v-for="(item, index) in initList" :key="index">

<div v-for="(item, index) in item.children" :key="index" @click="onPitch(item.length)">

<span class="tagContant" :class="{ tagAlter: gather.indexOf(item.length) > -1 }">{{

item.name

}}</span>

</div>

</div>

</div>

</div>

data：

initList: [

{

name: '省市',

index: '0',

children: [

{ name: '北京', length: '北京' },

{ name: '上海', length: '上海' },

{ name: '广州', length: '广州' },

{ name: '河南', length: '河南' },

{ name: '深圳', length: '深圳' }

]

},

{

name: '发布时间',

index: '1',

children: [

{ name: '近3天', length: '近3天' },

{ name: '近7天', length: '近7天' },

{ name: '近1个月', length: '近1个月' },

{ name: '近3个月', length: '近3个月' }

]

},

{

name: '模拟数据',

index: '2',

children: [

{ name: '运行稳定', length: '运行稳定' },

{ name: '快速响应', length: '运行稳定' },

{ name: '售后及时', length: '运行稳定' },

{ name: '解答专业', length: '运行稳定' }

]

}

],

gather: [], //选中集合数组

stringList: null //选中集合数组转换成字符串

methods：

//点击事件通过传参拿到每一条的id

onPitch(id) {

let subscript = this.gather.indexOf(id) //indexOf:返回某个指定的字符串值在字符串中首次出现的位置

if (subscript > -1) {

this.gather.splice(subscript, 1) //splice:用于添加或删除数组中的元素

} else {

this.gather.push(id) //通过push方法将选中id添加到数组中

}

this.stringList = this.gather.join(',') //转换成字符串并以逗号隔开

console.log(this.stringList, '选中的数据')

}

css：

.main {

width: 100%;

height: 800px;

/* 最外层的大盒子样式 */

.tagBox {

display: flex;

padding: 0px 8px;

}

/* 默认的样式 */

.tagContant {

display: flex;

align-content: center;

justify-content: center;

font-size: 14px;

width: 80px;

padding: 3px 0px;

color: rgb(161, 161, 161);

border: 1px solid rgb(161, 161, 161);

border-radius: 4px;

margin: 10px 4px;

}

/* 点击后的样式 */

.tagAlter {

background-color: rgb(252, 242, 233);

color: rgb(216, 122, 62);

border: 1px solid rgb(216, 122, 62);

}

}