鍍金池/ 問答/HTML/ vue中的v-if與v-show使用?

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

  1. 頂部右側(cè)有四個按鈕, 每個按鈕下面都有一個echarts, 當(dāng)點擊到某一個按鈕的時候就讓當(dāng)前的echarts顯示, 默認(rèn)是顯示第一個按鈕下面的echarts, 自己想到的是先注冊按鈕上的點擊時間, 然后通過for循環(huán)利用索引來對應(yīng)下面的echarts顯示, 因為按鈕上的數(shù)據(jù)都是寫死在頁面上, 跟自己想的有點出入

clipboard.png
結(jié)構(gòu)

                  <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>
回答
編輯回答
喜歡你

這里建議用 <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，兩者的區(qū)別主要在于前者是“用到才創(chuàng)建”，后者則是先創(chuàng)建組件和 DOM，用到再顯示，參考你的餅圖，應(yīng)該影響不大，用哪個都行。

2018年4月9日 04:13