vue template 新发现的使用数据方式 2021/7/14

我们先来个例子
这是我公司项目中的一部分，前辈写的代码的一部分

	  <a
        href="javascript:;"
        :class="[anchorIndex == 1 ? 'active' : '']"
        v-show="tablistCon2.navigationId"
        @click="clickOffset('loca2', 1)"
      >{{ tablistCon2.navigationTitle }}</a>
      <a
        href="javascript:;"
        :class="[anchorIndex == 2 ? 'active' : '']"
        v-show="tablistCon3.navigationId"
        @click="clickOffset('loca3', 2)"
      >{{ tablistCon3.navigationTitle }}</a>
      <a
        href="javascript:;"
        :class="[anchorIndex == 3 ? 'active' : '']"
        v-show="tablistCon4.navigationId"
        @click="clickOffset('loca4', 3)"
      >{{ tablistCon4.navigationTitle }}</a>

这里我们可以看见，变化的地方，无非就是一些数值上的变化，但是，因为有属性的存在，所以并没有使用v-for循环

然后，我就去想办法使用v-for循环来简化它
然而，这第一次的尝试，并没有成功

		<a
        href="javascript:;"
        :class="[anchorIndex == index ? 'active' : '']"
        v-show="[`tablistCon${item}`].navigationId"
        @click="clickOffset(`loca${item}`, index)"
        v-for="(item,index) in 3" :key="index"
      >{{ [`tablistCon${item}`].navigationTitle }}
      </a>

我发现，这么搞，就不会去在data里面去获取数据，想想也是，有methods，computed等等东西，的确vue没法识别是哪个，于是

		<a
        href="javascript:;"
        :class="[anchorIndex == index ? 'active' : '']"
        v-show="$data[`tablistCon${item}`].navigationId"
        @click="clickOffset(`loca${item}`, index)"
        v-for="(item,index) in 3" :key="index"
      >{{ $data[`tablistCon${item}`].navigationTitle }}
      </a>

然后就成了，$data很少用到，可能是我经验还没有多少多少年吧，突然脑子想到了这种方式去使用。
以此举一反三，如果还有那些有规律的，是否也可以用循环去使用那些对象的属性呢？

还是我前辈们的一部分代码，因为一些不可避免的原因，导致还是有一些由数字区分的属性

 		 if (index == 0) {
           this.$refs.loca1.style.paddingTop = "91px";
         } else if (index == 1) {
           this.$refs.loca2.style.paddingTop = "91px";
         } else if (index == 2) {
           this.$refs.loca3.style.paddingTop = "91px";
         } else if (index == 3) {
           this.$refs.loca4.style.paddingTop = "91px";
         } else if (index == 4) {
           this.$refs.loca5.style.paddingTop = "91px";
         }

于是乎，同样可以用循环去解决这个问题

for(let i=0;i<5;i++){
	if(i==index){
		 this.$refs.[`loca${i+1}`].style.paddingTop = "91px";
		 break;
	}
}

但是，如果这样，我为啥要循环呢，为什么不直接这样

this.$refs.[`loca${index+1}`].style.paddingTop = "91px";

然后我就把我前辈的一堆if-else变成一行代码了