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>

以上所述是小编给大家介绍的Vue中v-show添加表达式的问题(判断是否显示)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！