vue2点击显示和隐藏

最新推荐文章于 2024-07-29 11:05:02 发布

xx820702

最新推荐文章于 2024-07-29 11:05:02 发布

阅读量1k

点赞数

分类专栏： html css vue2

本文链接：https://blog.csdn.net/xx820702/article/details/125932289

版权

Vue 数据过滤动态显示下拉选择博客管理

关键词由CSDN通过智能技术生成

vue2 同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

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