2019-01-24 13:59:14
vue :ref属性实现双层遍历选项卡功能
html代码：
<template v-for="(items,indexs) in 3">
<div>
<div :class="{'tab-active':tabVal==index}" :ref="'tab'+indexs" v-for="(item,index) in ['基本信息','方案配置','成果文件']" @click="toggle(index,indexs,3)">{{item}}
</div>
</div>
<template v-for="(item,index) in 3">
<div :class="{none:index>0}" :ref="'tabs'+indexs">
<p>
<span class="color-default">标题：</span>
<span>内容 {{index}}</span>
</p>
</div>
</template>
</template>
vue代码：
toggle(index, items, length) {
for(var i = 0; i < length; i++) {
var string = "this.$refs.tabs" + items + "[" + i + "].style.display='none'"
console.log(string)
eval(string);
}
var string = "this.$refs.tabs" + items + "[" + index + "].style.display='block'"
eval(string);
for(var k = 0; k < length; k++) {
var str = "this.$refs.tab" + items + "[" + k + "].classList.remove('tab-active')";
eval(str);
}
var str = "this.$refs.tab" + items + "[" + index + "].classList.add('tab-active')";
eval(str);
},
最后生成于 2023-06-18 18:32:45
热门推荐：
1230博客
