多选类型项,点击亮或不亮

用于菜单下拉 多选项 。

 <div style="display: flex; flex-wrap: wrap;margin: 0 auto;">
    <div v-for="(item, index) in prpductnames" :key="item.id">
        <span :class="{ 'selected': selectArr.includes(item.id) }" 
           @click="clicktab1(item.id)">
               {{ item.name }}
         </span>
     </div>
</div>


.tag{
  width: 80px;
  margin:10px;
  border-radius: 20px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid black;
}

// 列表数据
const data=[{id:1,name:'名片'},{id:2,name:'宣传单'},{id:3,name:'折页'}]
const selectArr = ref([]) // 数据
// 点击tag标签事件
const clicktab1 = (id) => {
  const index = selectArr.value.indexOf(id);

  if (index === -1) {
    selectArr.value.push(id)
  } else {
    selectArr.value.splice(index, 1);
  }
}