Vue中v-show添加表达式的问题(判断是否显示)


Posted in Javascript onMarch 26, 2018

一、需求场景

1、先来说说我的需求,有数据来源和标签类型两行选项,如下图所示:

Vue中v-show添加表达式的问题(判断是否显示)

2、根据需求,我需要在点击上面的某个数据来源的时候,下面的标签类型自动切换,

需求说明如下:

Vue中v-show添加表达式的问题(判断是否显示)

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添加表达式的问题(判断是否显示),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
Sep 05 Javascript
js函数调用的方式
May 06 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
Angular 组件之间的交互的示例代码
Mar 24 #Javascript
Vue中computed与methods的区别详解
Mar 24 #Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 #Javascript
You might like
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
详解vue-cli中模拟数据的两种方法
2018/07/03 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
PyQt5实现简易计算器
2020/05/30 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
总经理秘书的岗位职责
2013/12/27 职场文书
职业女性的职业规划
2014/03/04 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
努力学习演讲稿
2014/05/10 职场文书
社区班子对照检查材料
2014/08/27 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书