<!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. 原来你是这样的JAVA[03]-继承、多态、抽象类

    一.继承 Java中的继承使用关键字extends ,跟C#的语法略有差别. 1.子类构造器 java会自动在子类的构造器中插入对父类构造器的调用,也就是说在子类可以访问父类之前已经完成了父类的初始化 ...

  2. WPF Binding学习(二)

    Binding作为数据的桥梁,连通业务逻辑层的对象(源对象)和UI的控件对象(目标对象).在这座桥梁上,我们不仅可以控制在源对象与目标对象是双向通行还是单向通行.还可以控制数据的放行时机,甚至可以在这 ...

  3. SQL数据开发(经典) 基本操作

    数据开发(经典) 1.按姓氏笔画排序: Select * From TableName Order By CustomerName Collate Chinese_PRC_Str oke_ci_as ...

  4. 【Java学习笔记之十九】super在Java继承中的用法小结

    1)有人写了个很好的初始化属性的构造函数,而你仅仅想要在其中添加另一些自己新建属性的初始化,这样在一个构造函数中调用另外一个构造函数,可以避免重复的代码量,减少工作量: 2)在一个构造函数中调用另外一 ...

  5. UVA424高精度加法

    One of the first users of BIT's new supercomputer was Chip Diller. He extended his exploration of po ...

  6. hdu_1014(竟然真的还有更水的)

    注意输出就没了... #include<cstdio> #include<cstring> using namespace std; int gcd(int a, int b) ...

  7. PL/SQL 实现行列转换

    这篇博文写的是简单的行列转换的,以一个具体的例子来给出. 以前在论坛上有人问过相关的问题,上面的回答五光十色,有很多是可行的,当然更多的是自以为很高端,实际却不着边际的回答.下面进入正题. part1 ...

  8. hbase伪分布式安装（单节点安装）

    hbase伪分布式安装(单节点安装) http://hbase.apache.org/book.html#quickstart   1.    前提配置好java,环境java变量     上传jdk ...

  9. 关于PHP 开启zlib gzip配置

    一般有两种方法:一种是使用ob_start("ob_gzhandler") ,是开启php自带的zlib配置,这里要说的是后者,此两种方法只能选其一,否则会报错 一.打开php.i ...

  10. JavaScript常见封装方法

    1.最简单的,使用变量,然后用匿名函数包裹,不封装 2.对象字面量简单封装(不完整的模块模式,因为无法达到变量.方法私有效果.不过确实有分离和组织代码的能力,也就算一种简略的模块模式的实现方式) va ...