Vue中v-show新增表達式的問題(判斷是否顯示)-js教程-PHP中文網

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

亚连

發布： 2018-05-29 09:41:34

原創

2219 人瀏覽過

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

一、需求場景

## 1.先來說說我的需求，有資料來源和標籤類型兩行選項，如下圖所示：

2、根據需求，我需要在點擊上面的某個資料來源的時候，下面的標籤類型會自動切換，

需求說明如下：

3、一開始是想寫死的，就是把各種情況寫死在頁面上，後來查看官方文檔一會，資料來源的集合可以這樣寫，id為各個類型的標識，name為名稱，mark為點擊某個資料來源的時候標籤類型根據當前點擊的資料來源進行判斷切換。如下圖：

 infoTypeList: [
 {
  id: 11,
  name: &#39;新闻&#39;,
  mark: &#39;news&#39;
 },
 {
  id: 13,
  name: &#39;论坛&#39;,
  mark: &#39;bbs&#39;
 },
 {
  id: 17,
  name: &#39;微博&#39;,
  mark: &#39;wb&#39;
 },
 {
  id: 6,
  name: &#39;微信&#39;,
  mark: &#39;wx&#39;
 },
 {
  id: 7,
  name: &#39;APP&#39;,
  mark: &#39;app&#39;
 },
 {
  id: 8,
  name: &#39;平媒&#39;,
  mark: &#39;pm&#39;
 },
 {
  id: 20,
  name: &#39;境外&#39;,
  mark: &#39;overseas&#39;
 },
 {
  id: 21,
  name: &#39;Facebook&#39;,
  mark: &#39;facebook&#39;
 },
 {
  id: 22,
  name: &#39;Twitter&#39;,
  mark: &#39;twitter&#39;
 }
],

登入後複製

4、接著標籤類型集合資料結構如下，其中mark欄位存放哪些資料來源包含於目前標籤。

markTypeList: [
{
id: 32,
name: &#39;主帖&#39;,
mark: &#39;bbs&#39;
},
{
id: 33,
name: &#39;回帖&#39;,
mark: &#39;bbs&#39;
},
{
id: 34,
name: &#39;原创&#39;,
mark: &#39;wb&#39;
},
{
id: 35,
name: &#39;转发&#39;,
mark: &#39;wb_wx&#39;
},
{
id: 36,
name: &#39;头条&#39;,
mark: &#39;news_app_wx_pm&#39;
},
{
id: 37,
name: &#39;头图&#39;,
mark: &#39;app&#39;
},
{
id: 38,
name: &#39;置顶&#39;,
mark: &#39;app&#39;
},
{
id: 39,
name: &#39;要闻&#39;,
mark: &#39;news&#39;
},
{
id: 40,
name: &#39;头版&#39;,
mark: &#39;pm&#39;
},
],

登入後複製

5、在資料來源的各個名稱中加入一個點擊事件，data中存入一個變數infoTypeMark,用於保存點擊的資料來源標識，我也數據來源的程式碼貼出來了。

<p 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>
</p>

登入後複製

6、重點是下面這一行程式碼，透過在v-show中加入表達式，用於判斷點擊新聞，應該顯示頭條和要聞，主要看標紅的那塊，程式碼如下：

<p 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>
</p>

登入後複製

上面是我整理給大家的，希望未來會對大家有幫助。 ######相關文章：#########js中apply和Math.max()函數的問題及區別介紹###############淺談Vue內建component元件的應用程式場景###############vue2中使用less簡易教學###################### #####

以上是Vue中v-show新增表達式的問題(判斷是否顯示)的詳細內容。更多資訊請關注PHP中文網其他相關文章！