手写tab标签切换，内容区域跟着切换

话不多说，直接上代码
html

<div id=city class="box" style="position: relative; width:100%;">
     <div class="box-tab ">
          <P class="tips">标签一</P>
          <p id=line style="opacity:1" class="box-tab-line"></p>
     </div>
     <div class="box-tab">
          <P class="tips">标签二</P>
          <p id=line style="opacity:0" class="box-tab-line"></p>
     </div>
    <div class="box-tab">
         <P class="tips">标签三</P>
         <p id=line style="opacity:0" class="box-tab-line"></p>
      </div>
    <div class="box-tab">
          <P class="tips">标签四</P>
          <p id=line style="opacity:0" class="box-tab-line"></p>
    </div>
</div>

js部分

数据结构
tabList: [],
arr: {
	centercode_list: ['鹿晗','关晓彤'],
	citycode_list: ["拉拉",'fad2'],
    citymscode_list: ["东区", "仁qu"],
    cityzycode_list: ["城东新区", "雁江区"],
},
let that = this;
var obj = {
     '标签一': 'centercode_list',
     '标签二': 'citycode_list',
     '标签三': 'citymscode_list',
     '标签四': 'cityzycode_list'
}
this.tabList = that.arr['centercode_list'];
var city = document.getElementById('city');
var dom = city.getElementsByTagName('div');
for (let i = 0; i < dom.length; i++) {
    dom[i].onclick = function () {
    for (let j = 0; j < dom.length; j++) {
         let a = dom[j].getElementsByTagName('p');
             a[1].style.opacity = 0;//点击是首先让所有的元素的下划线都隐藏
    }
    let a = dom[i].getElementsByTagName('p');
    a[1].style.opacity = 1;//让当前项显示下划线
    let innerText=dom[i].innerText;//替换内容
    for (var key in obj) {
        if (innerText.trim() == key.trim()) {
         that.tabList = that.arr[obj[key]];
        }
    }
    }
 }
},

tips:dom操作在vue中不能再created生命周期中操作，忘了这茬，浪费了半个小时，IOS系统if判断时需要去除前后空格