The use of v-if and v-show in vue?

  1. there are four buttons on the right side of the top. Under each button, an echarts, is displayed by the current echarts when a button is clicked. By default, the echarts, under the first button thinks of the click time on the registration button first, and then circulates the index through for to correspond to the following echarts display, because the data on the button is written on the page. It"s a little different from what you think

clipboard.png
structure

                  <div class="clearfix">
                    <h3 class="fl"></h3>
                    <el-row class="fr btn">
                      <el-button type="primary" round size="medium"></el-button>
                      <el-button type="primary" round size="medium"></el-button>
                      <el-button type="primary" round size="medium"></el-button>
                      <el-button type="primary" round size="medium"></el-button>
                    </el-row>
                  </div>
                  <div class="importance_chart">
                    <div id="importanceMain" style="width: 100%;height: 700px;"></div>
                    <div id="frequencyMain" style="width: 100%;height: 700px;"></div>
                    <div id="dominanceMain" style="width: 100%;height: 700px;"></div>
                    <div id="abundanceMain" style="width: 100%;height: 700px;"></div>
                  </div>
Mar.12,2021

it is recommended to use < label > + < input type= "radio" > instead of binding events.


  <label>
    <input type="radio" v-model="show" value="0"/>
  </label>
  <label>
    <input type="radio" v-model="show" value="1"/>
  </label>
  <label>
    <input type="radio" v-model="show" value="2"/>
  </label>
  <label>
    <input type="radio" v-model="show" value="3"/>
  </label>
</div>

as for v-if or v-show , the main difference between the two is that the former is "created only when needed", while the latter is to create components and DOM, to use and then display, referring to your pie chart, it should not affect much, either can be used.

Menu