在同一页面下点击下拉框切换不同的div

62 阅读 0 评论 41 点赞

我是靠谱客的博主坦率灯泡，最近开发中收集的这篇文章主要介绍在同一页面下点击下拉框切换不同的div，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近在写vue项目用到了vue+elementui等技术由于对element组件库不是太熟悉踩了一些坑，接下来分享给大家，希望能给大家带来一些帮助。
需求是这样的：在同一页面下点击下拉框切换不同的div （el-select 中 el-option下拉框绑定事件并切换）这里是点击权限下拉框切换不同用户
在这里插入图片描述

我的思路是这样的
给需要切换的div 加上v-show指令
v-show两个div的切换隐藏比较简单但是多个就得需要费些功夫了（通过绑定点击事件来解决）
刚开始被下拉列表绑定事件并切换不同的div困扰了好一阵
后续看过elementUI的API才找到了一个属性
啥也不说了干就完了直接上代码

HTML部分

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      @click.native="selectThing(item)">  <!--直接添加点击事件  .native后缀必须加 否则不生效-->
    </el-option>
  </el-select>
  <div v-show=isShowConent1>
    选项一
  </div>
  <div v-show=isShowConent2>
    选项二
  </div>
  <div v-show=isShowConent3>
    选项三
  </div>
</template>

JS部分

<script>
  export default {
    data() {
      return {
        options: [{
          value: '1',
          label: '黄金糕'
        }, {
          value: '2',
          label: '双皮奶'
        }, {
          value: '3',
          label: '蚵仔煎'
        } ],
        value: '',
    }
    },
methods:{
  selectThing(item){
    if(item.value=== '1'){            //options中的value
      this.isShowConent1 = true
      this.isShowConent2=false
      this.isShowConent3 = false
    }else if(item.value === '2') {
      this.isShowConent1 = false
      this.isShowConent2=true
      this.isShowConent3 = false
    }else if(item.value === '3') {
      this.isShowConent1 = false
      this.isShowConent2=false
      this.isShowConent3 = true
  }
}
  }
  }
</script>