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

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

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

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

HTML代码


 


Vue JS代码

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


  methods: {

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

}

效果