簡單粗暴，先上圖，大概長這樣：

在使用vue時有遇到像上圖下拉框change事件切換div，change切完後大概會變成這個樣子：

上程式碼：

<div class="test">
    <p class="title">
        <select v-model="selected" v-on:change="change">
          <option v-for="option in options" v-bind:value="option.value">
            {{ option.text
 
 }}
          </option>
        </select>
    </p>

    <span>{{selected}}</span>
    <div id="timesharechart" v-show="isvisible" ></div>  
    <div id="receiveDispose" v-show="!isvisible"></div>  
</div>

<script>
    export default{
        name:"test"
 
,
        data(){
            return {
                selected: 'timeshare',
                options: [
                  { text: '分時警情', value: 'timeshare' },
                  { text: '接警與處置', value: 'receive' }
                ],
                isvisible:true
            }
        },


        methods:{
            change:function
 
(){
                if(this.selected == "receive"){
                    this.isvisible = false;
                }else{
                    this.isvisible = true;
                }
            },
</script>

這裡時我們為了確定當前顯示的是哪個block，所以在data中引入了“selected”,方便其他操作，其實完全可以採用change事件和v-if指令來判斷 true和false的方法來切換block。

code：

change:function(){
                if(this.isvisible == true){
                    this.isvisible = false;
                }else{
                    this.isvisible = true;
                }
            }

這樣就變成了true, false。

那麼問題來了：以上解決了change事件對div圖表容器的切換顯示內容，但是問題是切換後不顯示圖表，控制檯報錯：“Can’t get dom width or height”，檢查了遍div容器是設定了大小的，上網一查才知道是因為echarts只能在顯示的容器中渲染，解決辦法：在容器切換之後再渲染圖表，也就是在觸發切換的事件中操作echarts初始化，我是這麼解決的，在呼叫echart.init之前，給圖形dom加上對應的寬度和高度。

drawCharts(){
     // 基於準備好的dom，初始化echarts例項,dom容器中需要在呼叫echart.init之前，必須給圖形dom加上對應的寬度和高度，不然echarts不能渲染
     document.getElementById("container").style.display = "block";
     let myChart = this.$echarts.init(document.getElementById('container'));
                // 繪製圖表
                receiveChart.setOption({});
   }

其他tab，button等切換方式如出一轍。