关于Vue中v-show中添加表达式用于判断是否显示的问题

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
   
   : 
   
   '
   
   原创
   
   '
   
   ,
  
  

  
  

   
       
   
   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>
  
  

如此就不用写那么多判断了，如上是我在开发的过程中遇到的一个小问题，

若有更好的方法，还希望告诉菜鸟我，3Q!