1. Now the tab switch has been realized, but the data is all traversed from the data instance of vue. How to extract the data from the data instance and put it in the html structure? because the data cannot be only one point, it is not very convenient to put it in the data. For example, I have only one wrap now, but I want to change the wrap to six written in the html structure. Please give me more advice on
html
<div class="chart clearfix">
<div class="btn-group fl">
<button v-for="(item,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="nav(index)" :key="index">{{item}}</button>
</div>
<div class="wrap fl">
<div v-for="(w,key,index) in box" v-if="indexs == index" :key="index">{{w}}-{{key}}</div>
</div>
</div>js
export default {
data() {
return {
btn: [
"",
"",
"",
"",
"",
""
],
box: {
aa: "tab1",
bb: "tab2",
cc: "tab3",
dd: "tab4",
ee: "tab5",
ff: "tab6"
},
indexs: 0
};
},
methods: {
nav(str) {
this.indexs = str;
}
}
}; 