想要通过vuejs动态过滤（这里动态指得是过滤的条件是动态变化的），

一直没找到好办法，

最蠢的办法当然是两个两个数组，一个作为原始副本数组 一个作为视图数组，这样当过滤条件变化的时候

动态拷贝原始数组过滤后的结果 到视图数组，这样就能够使得vuejs感知 我们的视图数组变化，然后来更新视图

这种办法很蠢，而且拷贝很浪费时间，下面上代码

  1. <html>
  2.  
  3. <head>
  4.     <script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script>
  5. </head>
  6.  
  7. <body>
  8.     <div id="app">
  9.         <!--<li v-for="n in even(persons)">{{ n.name }}</li>-->
  10.         <li v-for="n in personsView">{{ n.name }} :: {{n.age}}</li>
  11.         <input type="text" v-model="age" placeholder="age" />
  12.     </div>
  13. </body>
  14. <script type="text/javascript">
  15.     var app = new Vue({
  16.         el: '#app',
  17.         data: {
  18.             age:0,
  19.             persons :[{
  20.                 name: '张三',
  21.                 age: 30
  22.             }, {
  23.                 name: '李四',
  24.                 age: 40
  25.             }, {
  26.                 name: '王五',
  27.                 age: 10
  28.             }],
  29.             personsView:[{
  30.                 name: '张三',
  31.                 age: 30
  32.             }, {
  33.                 name: '李四',
  34.                 age: 40
  35.             }, {
  36.                 name: '王五',
  37.                 age: 10
  38.             }]
  39.         },
  40.  
  41.         methods: {
  42.             even: function(persons) {
  43.                 return persons.filter(function(p) {
  44.                     return p.age >= 10;
  45.                 })
  46.             }
  47.         },
  48.         watch:{
  49.             age:function(val,oldVal){
  50.                 console.log('new: %s, old: %s', val, oldVal);
  51.                 console.log(this.persons.filter(function(p) {
  52.                     return p.age >= val;
  53.                 }).slice());
  54.                 this.personsView = this.persons.filter(function(p){
  55.                     return p.age >= val;
  56.                 }).slice();
  57.             }
  58.  
  59.         }
  60.  
  61.     });
  62. </script>
  63.  
  64. </html>

谁有更好的实现办法 一定要告诉我

vuejs的动态过滤的更多相关文章

  1. TODO：搭建Laravel VueJS SemanticUI

    TODO:搭建Laravel VueJS SemanticUI Laravel是一套简洁.优雅的PHP开发框架(PHP Web Framework).可以让你从面条一样杂乱的代码中解脱出来:它可以帮你 ...

  2. 一次页面从Jq到Vuejs+PartialView的迁徙

    题外话 本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了.希望我们勇敢的主动地给自己创造实践的机会. 手里 ...

  3. 使用vuejs框架进行列表渲染

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6170706.html 1.通过Script引入Vuejs框架 <script t ...

  4. Vuejs学习笔记1

    首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才 ...

  5. 【vuejs小项目——vuejs2.0版本】单页面搭建

    http://router.vuejs.org/zh-cn/essentials/nested-routes.html 使用嵌套路由开发,这里会出错主要把Vue.use(VueRouter);要进行引 ...

  6. 【vuejs小项目】一、脚手架搭建工作

    一.关于vuejs 这是一个MVVM的前端开发框架,model(数据).viewmode(通讯).view(视图),它吸取了reactjs和angularjs的长处,核心重点在于组件化的设计原则. 我 ...

  7. 使用 v-cloak 防止页面加载时出现 vuejs 的变量名

    使用 vuejs 做了一个简单的功能页面,逻辑是,页面加载后获取当前的经纬度,然后通过 ajax 从后台拉取附近的小区列表.但是 bug 出现了,在显示小区列表之前,会闪现小区名对应的 vuejs 变 ...

  8. vuejs里封装的和IOS,Android通信模块

    项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...

  9. [Vuejs] 关于vue-router里面的subRoutes

    刚学习vue,可能有使用不对的地方,希望没有对大家造成困扰! 使用vue-router,为了能够更好的管理.vue文件,需要用到子路由. 先看个错误的例子 routers.js '/company': ...

随机推荐

  1. Lind.DDD.ConfigConstants统一管理系统配置

    回到目录 Lind.DDD.ConfigConstants属于新添加的组件,用来帮助我们安全的进行配置消息的管理,我们在开发项目时,有个感觉,你的config配置项会越来越多,越来越难以阅读,随着你引 ...

  2. easyui框架对tab的限制提示

    使用easyui框架如果页面打开太多可能导致页面加载缓慢的问题,下面我们看看代码怎么写: var $tab = $('#tabs'); var tabCount = $tab.tabs('tabs') ...

  3. 64位win7+vs2010编译.net3.5以前的版本问题

    一般编译会出现 1.“ResGen.exe”已退出,代码为2 问题处理 2.“错误 2 “LC.exe”已退出,代码为 -1. NBGIS.MainGIS” 3.“未能加载文件或程序集“ESRI.Ar ...

  4. VS2010中整理代码快捷键

    快捷键:Ctrl+A Ctrl+K Ctrl+F的三个的组合2015-11-08

  5. navigationController 返回前N个视图

    前提是,由N个视图跳转过来的. //返回前n个 NSInteger index=[[self.navigationController viewControllers]indexOfObject:se ...

  6. ViewPager+GridView实现横向滑动 仿大众点评

    先看演示效果: 1  ViewPager类提供了多界面切换的新效果. 新效果有如下特征: [1] 当前显示一组界面中的其中一个界面. [2] 当用户通过左右滑动界面时,当前的屏幕显示当前界面和下一个界 ...

  7. js判断鼠标是否停止移动

    本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0: ...

  8. nginx File not found

    出现 nginx File not found 错误 首先判断这个文件是否 真的存在 如果文件确实存在 那么应该是 php-fpm 路径有问题了 解决办法 1查看 php-fpm 的配置文件 我的 文 ...

  9. java HelloWorld 提示“错误: 找不到或无法加载主类 HelloWorld“解决方案

    在检查环境变量等前提工作准确无误后,注意要配好CLASSPATH,仍然报“错误: 找不到或无法加载主类 HelloWorld“. 本人工程目录:mygs-maven/src/main/java/hel ...

  10. The process could not execute 'sp_repldone/sp_replcounters' on 'ServerName'

    昨天发现发布服务器S(SQL Server 2008 R2),出现大量如下错误 错误细节如下所示: Date :: PM :: PM) Source spid52 Message Replicatio ...