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 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
js实现上传图片到服务器
Apr 11 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生成不重复随机数的方法汇总
2014/11/19 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
javascript整除实现代码
2010/11/23 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
vue+iview实现文件上传
2020/11/17 Vue.js
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python利用platform模块获取系统信息
2020/10/09 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
八年级美术教学反思
2014/02/02 职场文书
会计学自我鉴定
2014/02/06 职场文书
《识字五》教学反思
2014/03/01 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
临时用工协议书范本
2014/10/29 职场文书
担保书范文
2015/01/20 职场文书
如何写辞职信
2015/05/13 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js