vue中的v-if与v-show使用?

Question

1. 顶部右侧有四个按钮, 每个按钮下面都有一个echarts, 当点击到某一个按钮的时候就让当前的echarts显示, 默认是显示第一个按钮下面的echarts, 自己想到的是先注册按钮上的点击时间, 然后通过for循环利用索引来对应下面的echarts显示, 因为按钮上的数据都是写死在页面上, 跟自己想的有点出入

结构

                  <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>

Answer 1

这里建议用 <label> + <input type="radio"> 来做，可以不用绑定事件。

.chart(v-for="(item, index) in charts", v-if="show == index")
  chart(:data="item")

.buttons
  label 重要值
    input(type="radio", v-model="show", value="0")
  label 相对多度
    input(type="radio", v-model="show", value="1")
  label 相对频度
    input(type="radio", v-model="show", value="2")
  label 相对显著度
    input(type="radio", v-model="show", value="3")

<div class="chart" v-for="(item, index) in charts" v-if="show == index">
  <chart :data="item"></chart>
</div>
<div class="buttons">
  <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>

至于 v-if 还是 v-show，两者的区别主要在于前者是“用到才创建”，后者则是先创建组件和 DOM，用到再显示，参考你的饼图，应该影响不大，用哪个都行。