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': ...
随机推荐
- Hibernate 表映射 主键生成策略与复合主键
主要分析三点: 一.数据表和Java类的映射 : 二.单一主键映射和主键的生成策略 : 三.复合主键的表映射 : 一.数据表和Java类的映射 Hibernate封装了数据库DDL语句,只需要将数据 ...
- Cats（1）－ 从Free开始，Free cats
cats是scala的一个新的函数式编程工具库,其设计原理基本继承了scalaz:大家都是haskell typeclass的scala版实现.当然,cats在scalaz的基础上从实现细节.库组织结 ...
- java实现链表
单链表 package com.voole.linkedlist; public class Test { public static void main(String[] args) { Linke ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(24)-权限组的设计和实现(附源码)(终结)
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
- Eclipse如何发布web项目
目录结构: // contents structure [-] 需要的环境 下载和配置JDK 下载和配置Tomcat 下载Eclipse Eclipse 4.4.0 发布Web步骤 创建server ...
- 多级弹出菜单jQuery插件ZoneMenu
ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 在线体验:http://keleyi.com/jq/zonemenu/ 点击这里下载 完整HTML文件代码 ...
- TinyMCE 官方插件一览表(不完全)
TinyMCE 官方插件一览表:advlist(Advanced List Plugin):项目编号.toolbar:bullist.autolink:自动加链接.lists:This list pl ...
- PowerDesigner 逆向工程 Mariadb 失败
作者环境是win8.1 64位置 PowerDesigner 15, Mariadb 10+,在逆向的过程中发生错误,导致只能逆向出表对象,但是表对象中的字段信息确实没有的. 错误信息中的一部分是: ...
- Java Web中请求转发和请求包含
1.都是在一个请求中跨越多个Servlet 2.多个Servlet在一个请求中,他们共享request对象.就是在AServle中setAttribute()保存数据在BServlet中由getAtt ...
- java设计模式--策略模式
策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 本文地址:http:// ...