vue tab切换

Posted 2020-11-07 鄢宁

 1 <template>
 2   <div class="box">
 3     <ul>
 4       <li v-for="(item,index) in arrText" :key="index" @click="tab(index)" :class=‘{active:index===num}‘>{{item}}</li>
 5     </ul>
 6     <div class="text">
 7       <p v-for="(items,index) in arrConten" :key="index" v-show="index===num">{{items}}</p>
 8     </div>
 9   </div>
10 </template>
11 <script type="text/ecmascript-6">
12 export default {
13   name: ‘planning‘,
14   data () {
15     return {
16       arrText: [‘月落‘, ‘乌啼‘, ‘霜满天‘, ‘江枫‘, ‘渔火‘, ‘对愁眠‘],
17       arrConten: [‘月上柳枝头‘, ‘乌鸦啼血猿哀鸣‘, ‘霜叶红于二月花‘, ‘一江春水向东流‘,‘授人以鱼不如授人以渔‘, ‘春眠不觉晓‘],
18       num: 0
19     }
20   },
21   methods: {
22     tab (val) {
23       console.log(val)
24       this.num = val
25     }
26   }
27 }
28 </script>
29 <style lang="stylus" rel="stylesheet/stylus" scoped>
30 ul
31   display flex
32   justify-content space-around
33   margin-top 1rem
34   font-size 0.3rem
35   li
36     // background pink
37     color #8B008B
38     padding 5px
39     text-align center
40     border-radius 3px
41     cursor pointer
42     width 17%
43   .active
44     color #C67171
45     border-bottom 2px solid #C67171
46     // background #C0FF3E
47 .text
48   width 100%
49   height 300px
50   border 1px solid #ff3341
51   margin-top 0.5rem
52   padding 1rem
53   font-size 0.3rem
54 </style>