组件样式交替显示(点击触发tag变input)

效果展示：

默认展示经纬度数值，点击后变为input输入框可以输入
点击前：
点击后：

代码：

html：
首选是一个组件v-for的循环展示，v-for中再设置两种样式

<div id="item-area">
      <div
        class="item"
        v-for="(i, index) in items"
        :key="index"
      >
        <el-input
          class="input-new-tag"
          v-show="i.isShow"
          ref="saveTagInput"
          v-model="i.VALUE"
          @keyup.enter.native="$event.target.blur()"
          @blur.stop="handleChange(i, index)"
        ></el-input>
        <el-tag
          v-show="!i.isShow"
          closable
          :disable-transitions="false"
          :style="{ backgroundColor: getColor(i.TYPE), color: 'white' }"
          @click.stop="showInput(i, index)"
          @close="deleteItem(index)"
        >
          {{ i.VALUE }}
        </el-tag>
      </div>
    </div>

items是父组件传过来的数组，数组中是对象
v-show中用了每个对象的isShow属性即 i.isShow

<el-input v-show="i.isShow"></el-input>
<el-tag v-show="!i.isShow"></el-tag>

el-input 中绑定的值是i.VALUE
el-tag 中关联数值{{i.VALUE}}
tag点击触发函数showInput（）

JS:
props中：

props: {
    items: Array
  },

watch中：
监视对象某属性变化需用deep：true

watch:{
   items:{
     deep:true
   }
  },

methods中：
注意：修改数组对象中某属性要用$set()。否则无法更改。

 methods: {
 showInput(item, index) {
      let _this = this;
      if (!item.isShow) {
        _this.$set(item, "isShow", true);
      } else {
        _this.$set(item, "isShow", false);
      }
    },
}