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>