Vue中v-show添加表達式的問題(判斷是否顯示)

更新時間：2018年03月26日 09:39:43 作者：jmin_coming

這篇文章主要介紹了關于Vue中v-show中添加表達式用于判斷是否顯示的問題,很多朋友經常會遇到這樣的需求，有數據來源和標簽類型兩行選項，需要實現點擊上面的某個數據來源時，標簽類型自動切換功能，感興趣的朋友一起看看吧

一、需求場景

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: '原創(chuàng)',
mark: 'wb'
},
{
id: 35,
name: '轉發(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、在數據來源的各個名稱中加入一個點擊事件，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添加表達式的問題(判斷是否顯示)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

vue中el-tree?橫向滾動條的實現
本文詳細介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實現橫向滾動功能,感興趣的可以了解一下
2024-09-09
Vue3的組合式API中使用ref()函數的例子
你們是否聽說過Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數轉化為了函數組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數，感興趣的朋友跟隨小編一起看看吧
2023-06-06
vue-cli 2.*中導入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導入公共less文件的方法步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue中watch和computed的區(qū)別詳解
這篇文章主要給大家介紹了關于vue中watch和computed區(qū)別的相關資料,computed和watch都是vue框架中的用于監(jiān)聽數據變化的屬性,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
Vue props中Object和Array設置默認值操作
這篇文章主要介紹了Vue props中Object和Array設置默認值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue中用JSON實現刷新界面不影響倒計時
這篇文章主要為大家詳細介紹了Vue中用JSON實現刷新界面不影響倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
vue3.0如何使用computed來獲取vuex里數據
這篇文章主要介紹了vue3.0如何使用computed來獲取vuex里數據問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
ElementUI中兩個Select選擇聯(lián)動效果實現方法
這篇文章主要給大家介紹了關于ElementUI中兩個Select選擇聯(lián)動效果實現的相關資料,在前端項目開發(fā)中,經常會遇到省市縣三級聯(lián)動的下拉列表框組的問題,需要的朋友可以參考下
2023-08-08
vue+element ui el-tooltip動態(tài)顯示隱藏問題
這篇文章主要介紹了vue+element ui el-tooltip動態(tài)顯示隱藏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue使用pdf.js和docx-preview實現docx和pdf的在線預覽
這篇文章主要為大家詳細介紹了在Vue中使用pdf.js和docx-preview實現docx和pdf的在線預覽的相關知識,文中的示例代碼講解詳細,需要的可以參考下
2025-03-03