vue 创建标签实现增删改查、点击改变字体颜色

这个demo涉及的知识点挺多的，有需要的同学自己拷贝代码研究一下，代码里面基本都有注释了，注意这里使用了element ui，要记得下载一下这个插件。
实现效果图如下，增删改查基本都实现了，而且做了一些简单的条件限制，有需要的同学可以来拿玩一下。

<template>
  <div class="list">
    <ul>
      <el-input
        class="inline-input2"
        placeholder="请输入要新增的标签"
        v-model="newTag"
        size="mini"
      ></el-input>
      <button @click="add()">确定</button>
      <el-input
        class="inline-input"
        placeholder="请输入要查找的标签"
        suffix-icon="el-icon-search"
        v-model="tag"
        size="mini"
      ></el-input>
      <li v-for="(item, index) in filterData" :key="index" class="tag-list">
        <el-row>
          <el-col :span="12">
            <span
              class="tag-item"
              :class="{ active_tag: active === index }"
              :title="item.label"
              v-show="flag !== index"
              @click="changeColor(index)"
              >{{ item.label }}</span
            >
            <input
              ref="input"
              v-model="editName"
              @blur="updateName(item, index)"
              v-show="flag === index"
              class="tag-item"
            />
          </el-col>
          <el-col :span="12" class="tag-edit">
            <a href="#" @click="editor(item, index)">修改</a>
            <a href="#" @click="del(index)">删除</a>
            <a href="#" @click="moveUp(index)">上移</a>
            <a href="#" @click="moveDown(index)">下移</a>
          </el-col>
        </el-row>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list",
  components: {},
  data() {
    return {
      tagList: [
        { label: "标签一" },
        { label: "标签二" },
        { label: "标签三" },
        { label: "标签四" }
      ],
      flag: -1,
      active: -1,
      editName: "",
      tag: "",
      newTag: ""
    };
  },
  computed: {
    /* 模糊搜索 */
    filterData() {
      const tag = this.tag;
      if (tag) {
        return this.tagList.filter(data => {
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(tag) > -1
            );
          });
        });
      }
      return this.tagList;
    }
  },
  mounted() {},
  methods: {
    editor(item, index) {
      /* 给input框赋值 */
      this.editName = item.label;
      this.flag = index;
      /* this.$refs使其进入focus状态 */
      this.$nextTick(() => {
        this.$refs.input[index].focus();
      });
    },
    updateName(item, index) {
      /*  如果输入的标签名称为空 */
      if (!this.editName) {
        this.editName = item.label;
        this.flag = -1;
        return this.$message.warning("修改的标签名称不能为空");
      }
      /*  如果输入的标签名称已存在 */
      for (let i = 0; i < this.tagList.length; i++) {
        if (this.tagList[i].label === this.editName) {
          /* 判断修改的名字是否是它本身 */
          if (this.editName !== item.label) {
            this.$message.warning("修改的标签名称已存在");
            this.flag = -1;
            return;
          }
        }
      }
      /* 如果修改的标签名称正确 */
      this.$set(this.tagList[index], "label", this.editName);
      this.flag = -1;
    },
    /* 增加新标签 */
    add() {
      if (!this.newTag) {
        return this.$message.warning("请输入要新增的标签！");
      }
      for (let i = 0; i < this.tagList.length; i++) {
        if (this.tagList[i].label === this.newTag) {
          this.$message.warning("标签名称已存在");
          return;
        }
      }
      this.tagList.push({ label: this.newTag });
    },
    /* 删除标签 */
    del(index) {
      this.tagList.splice(index, 1);
    },
    /* 上移标签 */
    moveUp(index) {
      if (index === 0) {
        return;
      }
      /* 上移 */
      this.tagList.splice(index - 1, 0, this.tagList[index]);
      /* 把残留的那一项删除 */
      this.tagList.splice(index + 1, 1);
    },
    /* 下移标签 */
    moveDown(index) {
      if (index === this.tagList.length - 1) {
        return;
      }
      /* 在下一项插入该项 */
      this.tagList.splice(index + 2, 0, this.tagList[index]);
      /* 把残留的那一项删除 */
      this.tagList.splice(index, 1);
    },
    /* 点击改变颜色 */
    changeColor(index) {
      this.active = index;
    }
  }
};
</script>

<style lang="less" scoped>
.list {
  width: 400px;
  .inline-input {
    position: relative;
    right: 8%;
    width: 181px;
    padding: 10px 0;
  }
  .inline-input2 {
    width: 181px;
    padding: 10px 0;
  }
  .tag-list {
    list-style: none;
    height: 35px;
    padding: 0 10px;
    .active_tag {
      background: #2989dd;
      color: #ffffff !important;
    }
    .tag-item {
      display: inline-block;
      width: 75px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #2b85e4;
      color: #2b85e4;
      text-align: center;
      border-radius: 50px;
      outline: none;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:nth-child(odd) {
      background: #f5fcfc;
    }
    .tag-edit {
      a {
        color: #2989dd;
        text-decoration: none;
        padding: 0 5px;
      }
    }
  }
}
</style>