vue实现筛选功能，文字选中变色

 <template>
     <Poptip trigger="hover" title="Title" content="content">
         <i-button>Hover</i-button>
     </Poptip>
     <Poptip trigger="hover" title="Title" content="content">
         <i-button>Hover</i-button>
     </Poptip>
     <Poptip trigger="hover" title="Title" content="content">
         <i-button>Hover</i-button>
     </Poptip>
     <Poptip trigger="hover" title="Title" content="content">
         <i-button>Hover</i-button>
     </Poptip>
     <Poptip title="" content="content">
         <i-button>筛选</i-button>
         <div class="api" slot="content">
             <Tabs :animated="false" v-model="currentTab" @on-click="currentTabChanged">
                 <tab-pane label="学院" name="xy">
                     <i-row v-for="item in xyList" @click='showZy(item)'>
                         <i-col span="12" class="xy" :class="{'selectedColor':flag1==item.id}">
                             {{item.label}}
                         </i-col>
                     </i-row>
                 </tab-pane>
                 <tab-pane label="专业" name="zy" v-if="show2">
                     <i-row v-for="item in xyList.zy" @click="showList(item)">
                         <i-col span="12" class="xy" :class="{'selectedColor':flag2==item.id}">
                             {{item.label}}
                         </i-col>
                     </i-row>
                 </tab-pane>
             </Tabs>
         </div>
     </Poptip>
 </template>
 <script>
     export default {
         data() {
             return {
                 currentTab: 'xy',
                 show2: false,
                 flag1: -1,
                 flag2: -1,
                 xyList: [{
                         value: 'renwen',
                         id: 1,
                         label: '马克思主义学院',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '马克思'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '马克思'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '马克思'
                             }
                         ]
                     },
                     {
                         value: 'dili',
                         id: 2,
                         label: '地理信息科学技术学院',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '地理'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '地理'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '地理'
                             }
                         ]
                     },
                     {
                         value: 'sheke',
                         id: 3,
                         label: '社科',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '社科'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '社科'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '社科'
                             }
                         ]
                     },
                     {
                         value: 'renwen',
                         id: 4,
                         label: '人文',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '人文'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '人文'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '人文'
                             }
                         ]
                     },
                     {
                         value: 'dili',
                         id: 5,
                         label: '地理',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '地理'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '地理'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '地理'
                             }
                         ]
                     },
                     {
                         value: 'sheke',
                         id: 6,
                         label: '社科',
                         zy: [{
                                 value: 'xinxi',
                                 id: 1,
                                 label: '社科'
                             },
                             {
                                 value: 'gongcheng',
                                 id: 2,
                                 label: '社科'
                             },
                             {
                                 value: 'tongxin',
                                 id: 3,
                                 label: '社科'
                             }
                         ]
                     }
                 ]
             }
         },
         methods: {
             currentTabChanged(name) {
                 if(this.currentTab == 'xy'){
                     // this.show2 = false
                 }
             },
             showZy(item) {
                 if (item.label) {
                     this.flag1 = item.id
                     this.xyList.zy = item.zy
                     this.show2 = true
                     this.currentTab = 'zy'
                     // console.log(this.xyList.zy)
                 }
             },
             showList(item) {
                 if (item.label) {
                     this.flag2 = item.id
                     // console.log(item.label)
                 }
             }
         }
     }
 </script> <style>
     span {
         padding: 10px;
         cursor: pointer;
     }     .xy {
         cursor: pointer;
         padding: 5px;
         box-sizing: border-box;
     }     .selectedColor {
         color: #2d8cf0;
     }
 </style>

复制以上代码到 run ivew 网站预览效果