vuejs的动态过滤
想要通过vuejs动态过滤（这里动态指得是过滤的条件是动态变化的），
一直没找到好办法，
最蠢的办法当然是两个两个数组，一个作为原始副本数组 一个作为视图数组，这样当过滤条件变化的时候
动态拷贝原始数组过滤后的结果 到视图数组，这样就能够使得vuejs感知 我们的视图数组变化，然后来更新视图
这种办法很蠢，而且拷贝很浪费时间，下面上代码
<html> <head>
<script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script>
</head> <body>
<div id="app">
<!--<li v-for="n in even(persons)">{{ n.name }}</li>-->
<li v-for="n in personsView">{{ n.name }} :: {{n.age}}</li>
<input type="text" v-model="age" placeholder="age" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
age:0,
persons :[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}],
personsView:[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}]
}, methods: {
even: function(persons) {
return persons.filter(function(p) {
return p.age >= 10;
})
}
},
watch:{
age:function(val,oldVal){
console.log('new: %s, old: %s', val, oldVal);
console.log(this.persons.filter(function(p) {
return p.age >= val;
}).slice());
this.personsView = this.persons.filter(function(p){
return p.age >= val;
}).slice();
} } });
</script> </html>
谁有更好的实现办法 一定要告诉我
vuejs的动态过滤的更多相关文章
- TODO：搭建Laravel VueJS SemanticUI
TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...
- 一次页面从Jq到Vuejs+PartialView的迁徙
题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...
- 使用vuejs框架进行列表渲染
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...
- Vuejs学习笔记1
首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...
- 【vuejs小项目——vuejs2.0版本】单页面搭建
http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...
- 【vuejs小项目】一、脚手架搭建工作
一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...
- 使用 v-cloak 防止页面加载时出现 vuejs 的变量名
使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...
- vuejs里封装的和IOS,Android通信模块
项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...
- [Vuejs] 关于vue-router里面的subRoutes
刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...
随机推荐
- MySQL中优化sql语句查询常用的30种方法
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使 ...
- 使用PHPMailer发送邮件
如果要使用php发送邮件,则可以使用PHP 内置的mail() 函数,但是mail()函数需要有服务器支持 必须有自己的邮件服务器,如果使用stmp服务来发送邮件的话相当于代替别人发送,而不是从自己服 ...
- Hibernate 参数设置一览表
Hibernate 参数设置一览表 属性名 用途 hibernate.dialect 一个Hibernate Dialect类名允许Hibernate针对特定的关系数据库生成优化的SQL. 取值 fu ...
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 轻松掌握：JavaScript单例模式
单例模式 定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点: 实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例; 主要用于:全局缓存.登录浮窗等只需要 ...
- HTML5学习笔记四 HTML文本格式化
HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...
- MyEclipse 2016 CI 1支持远程WebSphere连接器
MyEclipse 2016 CI 1有很多Web开发者会喜欢的新功能,包括Live Preview,带有Map支持和hot-swap功能的JavaScript调试.另外还新增支持远程WebSpher ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- NSLog 占位符
转自:http://blog.sina.com.cn/s/blog_75f190280101dmj8.html [iOS]Objective-C占位符使用 (2013-10-21 10:24:16) ...