一、需求場景
1、先來說說我的需求，有數(shù)據(jù)來源和標(biāo)簽類型兩行選項(xiàng)，如下圖所示：
2、根據(jù)需求，我需要在點(diǎn)擊上面的某個(gè)數(shù)據(jù)來源的時(shí)候，下面的標(biāo)簽類型自動切換，
需求說明如下：
3、一開始 是想寫死的，就是把各種情況寫死在頁面上，后來查看官方文檔一會，數(shù)據(jù)來源的集合可以這樣寫，id為各個(gè)類型的標(biāo)識，name為名稱，mark為點(diǎn)擊某個(gè)數(shù)據(jù)來源 的時(shí)候標(biāo)簽類型根據(jù)當(dāng)前點(diǎn)擊的數(shù)據(jù)來源進(jìn)行判斷切換。如下圖：
infoTypeList: [ { id: 11, name: '新聞', mark: 'news' }, { id: 13, name: '論壇', mark: 'bbs' }, { id: 17, name: '微博', mark: 'wb' }, { id: 6, name: '微信', mark: 'wx' }, { id: 7, name: 'APP', mark: 'app' }, { id: 8, name: '平媒', mark: 'pm' }, { id: 20, name: '境外', mark: 'overseas' }, { id: 21, name: 'Facebook', mark: 'facebook' }, { id: 22, name: 'Twitter', mark: 'twitter' }],4、然后標(biāo)簽類型集合數(shù)據(jù)結(jié)構(gòu)如下，其中mark字段存放哪些數(shù)據(jù)來源包含于當(dāng)前標(biāo)簽。
markTypeList: [{id: 32,name: '主帖',mark: 'bbs'},{id: 33,name: '回帖',mark: 'bbs'},{id: 34,name: '原創(chuàng)',mark: 'wb'},{id: 35,name: '轉(zhuǎn)發(fā)',mark: 'wb_wx'},{id: 36,name: '頭條',mark: 'news_app_wx_pm'},{id: 37,name: '頭圖',mark: 'app'},{id: 38,name: '置頂',mark: 'app'},{id: 39,name: '要聞',mark: 'news'},{id: 40,name: '頭版',mark: 'pm'},],5、在數(shù)據(jù)來源的各個(gè)名稱中加入一個(gè)點(diǎn)擊事件，data中存入一個(gè)變量infoTypeMark,用于保存點(diǎn)擊的數(shù)據(jù)來源標(biāo)識，我也數(shù)據(jù)來源的代碼貼出來了。
<div v-if="isShowSingleInfoType"><label class="left-10">數(shù)據(jù)來源</label><span class="info-type activecolor" @click="changeInfoType(-1)">全部</span><span class="info-type" @click="changeInfoType(item.id, item.mark)" v-for="item in infoTypeList" :key="item.id">{{item.name}}</span><label class="multichoose"><Button @click="toggleInfoType" size="small">+多選</Button></label></div>6、重點(diǎn)是下面這一行代碼，通過在v-show中添加表達(dá)式，用于判斷點(diǎn)擊新聞，應(yīng)該顯示頭條和要聞，主要看標(biāo)紅的那塊，代碼如下：
<div class="layout-content-main"><label class="left-10">
標(biāo)簽類型
</label><span class="mark-type activecolor" @click="changeMarkType(-1)">全部</span><span v-show="item.mark.indexOf(infoTypeMark) > -1" class="mark-type" @click="changeMarkType(item.id)" v-for="item in markTypeList" :key="item.id">{{item.name}}</span></div>總結(jié)
以上所述是小編給大家介紹的Vue中v-show添加表達(dá)式的問題(判斷是否顯示)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
