<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="../Scripts/jquery-1.10.2.min.js"></script>

</head>

<body>

        <div id="matchList" >

            <input type="button" value="刷新" onclick="refesh()" />

            <div v-for="(item,index) in eventList":id="item.id">

                    {{item.name}}

            </div>

        </div>

    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>

    <script type="text/javascript">

        var data = [{ "id": "", "name": "hh1" }, { "id": "", "name": "hh2" }, { "id": "", "name": "hh3" }];

        var vm = null;

        vm=new Vue({

            el: "#matchList",

            data: {

                eventList: data

            }

        });

        var eventNum = -;

        function refesh() {

            data = [{ "id": "", "name": "hh11" }];

            //vm.eventList = data;

            for (var i = ; i < data.length; i++) {

                var name = data[i].name;

                var id = data[i].id;

                var item = $(vm.eventList).filter(function (index, item) { if (item.id == id) { eventNum = index; } }); 

                if (eventNum > -) {

                    console.log(eventNum);

                    vm.eventList[eventNum] = data[i];

                    console.log(vm.eventList[]);

                }

            }

            //vm.eventList[0] = data[0];

            vm.$set(vm.eventList, , vm.eventList[]);

        }

    </script>

</body>

</html>

Vue.js根据列表某列值更新filter的更多相关文章

  1. Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  2. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  3. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  4. 使用Vue.js实现列表选中效果

     实际项目中,我们会遇到很多类似的需求,一个列表,需要点击其中一条高亮显示.熟悉JQuery的同学说这个太简单了.可以给这个选中的element设置一个active的class.配合Css样式,让ac ...

  5. vue.js对列表进行编辑未保存随时变更

    1.不要建立在同一vm对象下 2.使用深拷贝$.extend(true, vm.model, obj); 3.开新标签页

  6. vue.js循环for（列表渲染）详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  7. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  8. Vue.js安装使用教程

    一.说明 上大学前,请的都是前端JavaScript.后端ASP/PHP/JSP.前后端代码混杂:上大学时,请的都是前端Jquery.后端SSH.前后端代码分离通过模板关联:大学出来后,请的都是前端三 ...

  9. Vue.js快速介绍-超级马里奥像素艺术

    原文出处:Quick Introduction to Vue.js - Super Mario Pixel Art ::代码我已经归纳在github上:[vue2-pixel-art]::::__查看 ...

随机推荐

  1. C陷阱：求数组长度

    // 这是一篇导入进来的旧博客,可能有时效性问题. 程序中,当我们建立了一个int型数组:int a[]={1,2,3,4,5,6};随后我们可能需要知道它的长度,此时可以用这种方法:length = ...

  2. python写zip破解器

    浏览桌面依然平静,!!!!等等..怎么有个压缩包 打开一看!!!156.txt???waht the fuck? 卧槽还有密码!!!!!! 但是我不知道╮(╯▽╰)╭该怎么办呢! 很简单,python ...

  3. Unknown column in 'where clause'

    Unknown column in 'where clause' 错误如题:Unknown column in 'XXX' 'where clause' 意思是:未知表名 排查 1,查表名是否有错 2 ...

  4. bzoj usaco 金组水题题解（1）

    UPD:我真不是想骗访问量TAT..一开始没注意总长度写着写着网页崩了王仓(其实中午的时候就时常开始卡了= =)....损失了2h(幸好长一点的都单独开了一篇)....吓得赶紧分成两坨....TAT. ...

  5. Linux6.X图形界面如何打开终端以及如何将终端加入右键

    今天刚安装了一个centos 6.9图形界面的系统,安装完成后,鼠标右击没有打开终端的按钮,在网上查了一些资料,搞明白了,分享给大家. 在左上角菜单[Applications]--->[Syst ...

  6. Spring框架学习笔记（8）——AspectJ实现AOP

    使用代理对象实现AOP虽然可以满足需求,但是较为复杂,而Spring提供一种简单的实现AOP的方法AspectJ 同样的计算器的DEMO 首先配置applicationContext.xml < ...

  7. CentOS6下安装git

    Ubuntu12.04中默认没有安装Git.需要自行安装. 1. 安装Git 1.1 Ubuntu12.04下 可以使用apt-get方式安装,也可以下载源代码安装[1],我们这里使用apt-git安 ...

  8. javaScript事件流是什么？

    一.事件 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交 ...

  9. 使用layui在规定的期限内选择日期

    这几天碰到了layui中的日期与时间这个,本以为很简单的,可是又一个需求是这样的,有两个日期选择框,第一个日期选择框要求最小日期不得小于当前日期,第二个日期选择框要求最小日期为第一个日期选择框的选中日 ...

  10. tomcat更改端口号

    apache-tomcat-8文件下的conf文件下的server.xml文件打开将    <Connector port="8080" protocol="HTT ...