利用vue写filter时 当传入是一个对象时注意
vue或angular 写filter时,传入的是对象时一定注意,不能直接改变对象的值,因为在使用该filter的页面上,若传入的对象其他值发生变化,该filter也会重新运行,这样可能会报错,如下例子会产生undefined的对象值
下面的例子是利用vue vant ,arrtoArr是将['0','2']---->'问题1,问题3'的格式在页面中显示
页面
<div v-for="item,index in list" v-if="list.length!=0">
{{item.parstr | filtertest}}:{{item.pararr | arrtoArr}} //item对象的count值变化也会触发两个filter的变化
<span class="count">
<span @click="updateCount('deduce',index)">
<i class="van-icon van-icon-reduce-o"></i>
</span>
{{item.count}}
<span @click="updateCount('add',index)">
<i class="van-icon van-icon-add-o"></i>
</span>
</span>
</div>
页面对应的数据和方法
data:{
return {
list:[
{
parsrt:1,
pararr:['2','1'],
desc:'',
count:0
},
{
parstr:2,
pararr:['1','4','5'],
desc:'',
count:0
}
]
}
} ,
methods:{
updateCount(oprt,index){
if(oprt=='reduce'){
if(this.serviceList[index].count<=1){
this.$dialog.confirm({
title: '警告',
message: '确认删除么'
}).then(() => {
this.serviceList.splice(index,1);
}).catch(() => {
});
}else{
this.serviceList[index].count--; //一定注意此处serviceList的内部的某一个对象的count变化了,上面页面的两个filter都会重新运行
}
}else{
this.serviceList[index].count++;
}
} }
filter.js
Vue.filter('arrtoArr',function(par){
var comparlist = {
0:'问题1',
1:'问题2',
2:'问题3',
3:'问题4',
4:'问题5',
5:'问题6',
6:'问题7',
7:'问题8',
100:'问题9'
}
var arr = []
if(par==undefined||par.length<1){
return ''
}else{
for(var i=0;i<par.length;i++){
var tt = par[i] //此处不可直接改变其par参数的值
arr.push(comparlist[tt])
}
return arr.join(',');
}
})
利用vue写filter时 当传入是一个对象时注意的更多相关文章
- 利用vue写一个复选框的组件
HTML <multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multic ...
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式
最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...
- .NET Core的日志[5]:利用TraceSource写日志
从微软推出第一个版本的.NET Framework的时候,就在“System.Diagnostics”命名空间中提供了Debug和Trace两个类帮助我们完成针对调试和跟踪信息的日志记录.在.NET ...
- 利用Vue.js实现拼图游戏
之前写过一篇<基于Vue.js的表格分页组件>的文章,主要介绍了Vue组件的编写方法,有兴趣的可以访问这里进行阅读:http://www.cnblogs.com/luozhihao/p/5 ...
- 利用redis写webshell
redis和mongodb我之所见 最近自己在做一些个人的小创作.小项目,其中用到了mongodb和redis,最初可能对这二者没有深入的认识.都是所谓的“非关系型数据库”,有什么区别么? 实际上,在 ...
- 利用maven的filter和profile实现不同环境使用不同的配制
在我们平常的java开发中,会经常使用到很多配制文件(xxx.properties,xxx.xml),而当我们在本地开发(dev),测试环境测试(test),线上生产使用(product)时,需要不停 ...
- 学了C语言,如何利用cURL写一个程序验证某个网址的有效性?
在<C程序设计伴侣>以及这几篇关于cURL的文章中,我们介绍了如何利用cURL写一个下载程序,从网络下载文件.可是当我们在用这个程序下载文件时,又遇到了新问题:如果这个网址是无效的,那么我 ...
- 利用TraceSource写日志
利用TraceSource写日志 从微软推出第一个版本的.NET Framework的时候,就在“System.Diagnostics”命名空间中提供了Debug和Trace两个类帮助我们完成针对调试 ...
随机推荐
- Java 基础 变量和运算符
Java基础语法 第1章 变量 1.1 变量概述 1.2 计算机存储单元 1.3 基本类型之4类8种 1.4 常量与类型 1.5 定义变量(创建变量) 1.6 变量使用的注意事项 1.7 数据类型 ...
- shell 脚本中如何添加多行注释
shell中有时会用到多行注释,一种时vim的快捷方式,我不太熟悉,一种是如下 :<<! ......! 使用: :<< !.......! 比如: :<< ! ...
- centos6.6 7 vim编辑器中文乱码
编辑~/.vimrc文件,加上如下几行: set fileencodings=utf-8,ucs-bom,gb18030,gbk,gb2312,cp936 set termencoding=utf-8 ...
- (已解决)在linux的虚拟机上安装vmware tools(实现windows与虚拟机之间的文件交互复制粘贴)
Linux下需要安装VMware Tools工具来实现主机和虚拟机直接文件复制粘贴功能,安装方法如下: ①点击虚拟机VM菜单栏--虚拟机--安装VMware Tools. ②然后RedHat系统中弹出 ...
- cocos2d JS 设置字幕循环滚动(背景图滚动亦可)
var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...
- python No tests were found问题解决方法
由于刚刚开始用python去写测试接口框架,在写的过程中遇到No tests were found问题 原因:python中unittest框架是以Test开头的方法,所以定义方法或类不能以Test开 ...
- 网络编程之Socket详解
在说socket之前.我们先了解下相关的网络知识: 端口 在Internet上有很多这样的主机,这些主机一般运行了多个服务软件,同时提供几种服务.每种服务都打开一个Socket,并绑定到一个端口上 ...
- 实验验证sys和system用户全库导出的区别
我们在做逻辑数据泵全库导出的时候,有两种流行的写法,一种是sys用户导出,一种是使用system用户导出. 现在想知道二者之间有什么区别?实验验证之前不妨先思考一下: sys和system用户的权限区 ...
- keras图像分类参考大神博客总结
利用keras预加载模型添加新的层来构建自己所需的模型: from keras.layers import GlobalAveragePooling2D,Dense from keras.applic ...
- Nodejs中原生遍历文件夹
最近在听老师讲的node课程,有个关于把异步变为同步读取文件夹的知识点做一些笔记, 让迭代器逐个自执行.