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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
PHP 第二节 数据类型之数组
2012/04/28 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
python图像处理之反色实现方法
2015/05/30 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
详解Python中类的定义与使用
2017/04/11 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
元旦晚会主持词
2014/03/24 职场文书
任命书格式
2014/06/05 职场文书
节约用水的口号
2014/06/20 职场文书
党性分析材料格式
2014/12/19 职场文书
党建工作汇报材料
2014/12/24 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
运动会班级前导词
2015/07/20 职场文书
干部考核工作总结
2015/08/12 职场文书
python 调用js的四种方式
2021/04/11 Python
MySQL 计算连续登录天数
2022/05/11 MySQL