vue-标签选择

效果

选中后

代码

<span

                    :class="[item.beal==true?'p_yx_span span_active ':'span p_yx']"

                    @click="onTagSelect(index)"

                    v-for="(item,index) in tagList"

                    :key="index"

                    >{{item.name}}

                </span>

// 列表值 

tagList:[

            {id: 1, name: 'tag 1',beal:false},

            {id: 2, name: 'tag 2',beal:false},

            {id: 3, name: 'tag 3',beal:false},

            {id: 4, name: 'tag 4',beal:false},

            {id: 5, name: 'tag 5',beal:false},

            {id: 6, name: 'tag 6',beal:false}

        ],

        // 选中值

        tagChooseData:[],

// 标签选择

        onTagSelect(e){

            this.tagList[e].beal = !this.tagList[e].beal;  //点击后改变状态

            if (this.tagList[e].beal == true) {

                this.tagChooseData.push(this.tagList[e].name);   //如果点击后是true那么直接添加

            } else {

                //如果不是true的话说明这个标签已经存在了，那么就要查找然后删除

                var index = this.tagChooseData.map(item => item).indexOf(this.tagList[e].name);

                if (index != -1) {

                this.tagChooseData.splice(index, 1);

                }

            }

        }

样式

.span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgba(255, 255, 255, 1);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}

.span_active {

  background: rgba(236, 173, 64, 1);

  color: #fff;

}

.p_yx {

  color: #222;

}

.p_yx_span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgb(76, 96, 193);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}