下拉框

页面中经常会出现一些下拉框，点击选择的时候显示点击的内容

html代码：

　　　<div class="lx">
         <div class="xlk_mr"  @click="fsxz">
             <p class="tbtb">
                  <span>{{ tbfa }}</span>
                  <span><img src="../../static/img/xiajt.png" alt=""></span>
             </p>
             <ul class="select" :class="{ fzxs: active3 }">
               <li class="tblx" v-for="(item, i) in tbxz" :key="i" @click="tbfa = item.value">{{item.value}}</li>
             </ul>
         </div>
     </div>

css代码：

.lx {
                    width: 250px;
                    font-size: 26px;
                    border: 1px solid #e11121;
                    border-radius: 5px;
                    height: 50px;
                    // text-align: center;
                    margin: 45px 0;
                    position: relative;
                    .xlk_mr{
                        line-height: 50px;
                        width: 250px;
                        text-indent: 40px;
                         .tbtb{
                            width: 100%;
                             height: 100%;
                             span{
                                 float: left;
                                 img{
                                     display: block;
                                     width: 20px;
                                     height: 13px;
                                   margin:20px 0 0 40px;
                                 }
                             }
                         }
                        .select{
                            width: 250px;
                            height: 0;
                            position: absolute;
                            background-color: #fff;
                            top: 51px;
                            left: 0;
                            overflow: hidden;
                            transition: all .3s
                            // display: none;
                        }
                        .fzxs{
                            height: 150px;
                            // display: block;
                        }
                    }
                }

js代码：

data （）{

     return {

 　　　　tbfa: '请选择',
 　　　　active3: false,
　　　　 active2: null,
      　　tbxz: [
        　　{
          　　lx: 'A',
          　　value: '雅典计划'
       　　 },
        　　{
        　　  lx: 'B',
          　　value: '尊贵计划'
        　　},
        　　{
          　　lx: 'C',
          　　value: '钻石计划'
        　　}
      　　]

　　}
}
 

 methods: {
    fsxz () {
      this.active3 ? this.active3 = false : this.active3 = true
    }
  }