下拉框

頁面中經常會出現一些下拉框，點選選擇的時候顯示點選的內容

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
    }
  }