在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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

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">相對(duì)多度</el-button>
                      <el-button type="primary" round size="medium">相對(duì)頻度</el-button>
                      <el-button type="primary" round size="medium">相對(duì)顯著度</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 相對(duì)多度
    input(type="radio", v-model="show", value="1")
  label 相對(duì)頻度
    input(type="radio", v-model="show", value="2")
  label 相對(duì)顯著度
    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>相對(duì)多度
    <input type="radio" v-model="show" value="1"/>
  </label>
  <label>相對(duì)頻度
    <input type="radio" v-model="show" value="2"/>
  </label>
  <label>相對(duì)顯著度
    <input type="radio" v-model="show" value="3"/>
  </label>
</div>

至于 v-if 還是 v-show，兩者的區(qū)別主要在于前者是“用到才創(chuàng)建”，后者則是先創(chuàng)建組件和 DOM，用到再顯示，參考你的餅圖，應(yīng)該影響不大，用哪個(gè)都行。

2018年4月9日 04:13