由type属性来选择tag的类型，也可以通过color属性来自定义背景色。

设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。

Tag 组件提供了三个不同的主题：dark、light 和 plain 通过设置effect属性来改变主题，默认为 light

<template>
  <div>

    <el-tag effect="dark" type="info" size="medium">tag1</el-tag>
    <el-tag effect="plain" type="danger" size="mini">tag2</el-tag>
    <el-tag type="success" size="small">tag3</el-tag>
    <el-tag type="warning">tag4</el-tag>

    <!--<el-tag v-for="tag in tags" :key="tag" :type="tag.type" closable>{{tag.name}}</el-tag> -->

     <el-tag
       :key="tag"
       v-for="tag in dynamicTags"
       closable
       :disable-transitions="false"
       @close="handleClose(tag)">
       {{tag}}
     </el-tag>


     <el-input
       class="input-new-tag"
       v-if="inputVisible"
       v-model="inputValue"
       ref="saveTagInput"
       size="small"
       @keyup.enter.native="handleInputConfirm"
       @blur="handleInputConfirm"
     >
     </el-input>
     <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>


</div>
</template>

<script>
  export default {
    data() {
      return {
        dynamicTags: ['标签一', '标签二', '标签三'],
        inputVisible: false,
        inputValue: ''
      };
    },
    methods: {
      handleClose(tag) {
        console.log(this.dynamicTags.indexOf(tag));

        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {

          this.dynamicTags.push(inputValue);
          console.log(this.dynamicTags)
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  }
</script>