vue 实现标签多选/反选

因为是学习vue我也是刚入门,只是简单的记录一下学习过程中用到的小组件和小问题,就不做其他的描述了

需求:标签的多选/反选

我使用的是 Element组件,具体安装就不说了自行百度
使用 el-row 嵌套 el-button 的方法:

<el-row class="wp-list">
        <el-button
          class="margin-top-10"
          v-for="item in interestList"
          :key="item.interestName"
          :class="{ active: item.isSelected }"
          @click="selected(item)"
          >{{ item.interestName }}</el-button
        >
      </el-row>

在data中初始化数据

data() {
    return {
 interestList: [],//用来初始化数据 例 PS:[{id:1,interestName:"标签1",isSelected:false}] 这个可以根据自己的需求自行定义 我在数据中默认添加了一个isSelected字段用来区别标签是否选中 true:选中状态 ,false:未选中状态
 interestSelected: [] //保存选择标签 例 PS:[1,2,4]//存放内容为标签的id 此值唯一(可自行根据自己的需求定义)
  }
      }

定义标签style

//定义选中状态的背景和边框颜色(可根据需求自行定义)
<style scoped>
.margin-top-10 {
  margin-top: 10px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
</style>

定义方法 用以响应修改点击时标签的状态

methods: {
selected(item) {

      //点击时状态置反 true -> false / false -> true
      item.isSelected = !item.isSelected

      //判断当修改过的状态为true时将此标签id存放进数组中
      if (item.isSelected) {
        this.interestSelected.push(item.id)
      } else {
      //否则将此id从数组中移除
        this.interestSelected.splice(this.interestSelected.indexOf(item.id), 1)
      }
    }
}

拿到此选中标签集合可进行后续操作,比如说上传到服务器更新数据库等等

下面是效果图:

效果预览

2021.07.07 17:21:06 周三 多云