一、需求場景
1、先來說說我的需求，有數據來源和標簽類型兩行選項，如下圖所示：
2、根據需求，我需要在點擊上面的某個數據來源的時候，下面的標簽類型自動切換，
需求說明如下：
3、一開始 是想寫死的，就是把各種情況寫死在頁面上，后來查看官方文檔一會，數據來源的集合可以這樣寫，id為各個類型的標識，name為名稱，mark為點擊某個數據來源 的時候標簽類型根據當前點擊的數據來源進行判斷切換。如下圖：
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、然后標簽類型集合數據結構如下，其中mark字段存放哪些數據來源包含于當前標簽。
markTypeList: [
{
id: 32,
name: '主帖',
mark: 'bbs'
},
{
id: 33,
name: '回帖',
mark: 'bbs'
},
{
id: 34,
name: '原創',
mark: 'wb'
},
{
id: 35,
name: '轉發',
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、在數據來源的各個名稱中加入一個點擊事件，data中存入一個變量infoTypeMark,用于保存點擊的數據來源標識，我也數據來源的代碼貼出來了。
<div v-if="isShowSingleInfoType">
<label class="left-10">數據來源</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、重點是下面這一行代碼，通過在v-show中添加表達式，用于判斷點擊新聞，應該顯示頭條和要聞，主要看標紅的那塊，代碼如下：
<div class="layout-content-main"> <label class="left-10">
標簽類型
</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>
總結
以上所述是小編給大家介紹的Vue中v-show添加表達式的問題(判斷是否顯示)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
