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 相关文章推荐
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
小程序实现多个选项卡切换
Jun 19 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
咖啡与牛奶
2021/03/03 冲泡冲煮
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
javascript常用功能汇总
2015/07/05 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python实现一个服务器监听多个客户端请求
2018/04/12 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
销售人员工作自我评价
2014/09/21 职场文书
小班上学期个人总结
2015/02/12 职场文书
余世维讲座观后感
2015/06/11 职场文书
党员发展大会主持词
2015/07/03 职场文书
python实现图片批量压缩
2021/04/24 Python