一、需求場(chǎng)景

目前成都創(chuàng)新互聯(lián)公司已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、烏蘭察布網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、先來(lái)說(shuō)說(shuō)我的需求，有數(shù)據(jù)來(lái)源和標(biāo)簽類型兩行選項(xiàng)，如下圖所示：

2、根據(jù)需求，我需要在點(diǎn)擊上面的某個(gè)數(shù)據(jù)來(lái)源的時(shí)候，下面的標(biāo)簽類型自動(dòng)切換，

需求說(shuō)明如下：

3、一開(kāi)始 是想寫死的，就是把各種情況寫死在頁(yè)面上，后來(lái)查看官方文檔一會(huì)，數(shù)據(jù)來(lái)源的集合可以這樣寫，id為各個(gè)類型的標(biāo)識(shí)，name為名稱，mark為點(diǎn)擊某個(gè)數(shù)據(jù)來(lái)源 的時(shí)候標(biāo)簽類型根據(jù)當(dāng)前點(diǎn)擊的數(shù)據(jù)來(lái)源進(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ù)來(lái)源包含于當(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ù)來(lái)源的各個(gè)名稱中加入一個(gè)點(diǎn)擊事件，data中存入一個(gè)變量infoTypeMark,用于保存點(diǎn)擊的數(shù)據(jù)來(lái)源標(biāo)識(shí)，我也數(shù)據(jù)來(lái)源的代碼貼出來(lái)了。

<div v-if="isShowSingleInfoType">
<label class="left-10">數(shù)據(jù)來(lái)源</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)是下面這一行代碼，通過(guò)在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á)式的問(wèn)題(判斷是否顯示)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文題目：Vue中v-show添加表達(dá)式的問(wèn)題(判斷是否顯示)
文章位置：http://aaarwkj.com/article6/peipog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、網(wǎng)站排名、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)