vue2点击显示和隐藏

 <div class="title">
        <span>{{showTitle}}</span>
        <span class="iconfont title-icon" @click="showChoice = !showChoice">&#xe6eb;</span>
        <div class="select-con" v-show="showChoice">
            <div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
               {{item.text}}
            </div>
        </div>
    </div>



data(){
   return{
      allData:null,//服务器数据
        showChoice:false,//是否显示可选项
        choiceType:'map'
}
},

computed:{
    selectTypes(){
        if(!this.allData){
            return []
        }else{
            return this.allData.type.filter(item =>{
                return item.key !== this.choiceType //过滤已选中的值不在下拉中显示
            })
        }
    },
    showTitle(){
        if(!this.allData){
            return ''
        } else{
            return this.allData[this.choiceType].title
        }
    }
   },

 

 


版权声明:本文为xx820702原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。