Vue中使用@change实现下拉菜单显示对应信息

最新推荐文章于 2024-09-13 15:23:50 发布

技术不行但人小帅

最新推荐文章于 2024-09-13 15:23:50 发布

阅读量1.7k

点赞数 1

文章标签： vue.js javascript bootstrap

本文链接：https://blog.csdn.net/m0_61629497/article/details/124003466

版权

如何使用@change 显示下拉菜单显示对应的信息？

例如当我点击省份时，显示省份下的城市。

接下来我以部门和部门岗位为例来完成这次的demo


HTML代码


 <b-form-select  @change="changePosition(newforms.part)" v-model="newforms.part" :options="variantsPart"></b-form-select>


Vue JS代码

data(){
  return{
     variantsPosition:[],
    newforms: {
        part: ""
          }
    }
}


  methods: {

//@change 根据点击的部门显示下级职位
 changePosition:function(part){
        if(part=="开发部"){
            this.variantsPosition=[ { label: "开发部", options: ["前端开发工程师", "后端开发工程师"]}];
        }else if(你需要的){
                ....
        }
 },

}

效果