<!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. Python3基础1

    Python介绍及特点 发展史 Python 2 or 3? 安装Python3 Hello World程序 变量 用户输入 模块初识 .pyc是个什么? 数据类型初识 数据运算 表达式if ...e ...

  2. eclipse自动提示功能没了的解决方法

    eclipse没有自动提示功能,也就是当一个对象居然点不出他的相关方法.后来网上搜索了下,成功的 办法是. 1.我window->Preferences->Java->Editor- ...

  3. 跟我一起读postgresql源码(十一)——Executor(查询执行模块之——Materialization节点(上))

    物化节点 顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下 ...

  4. UVA11636-Hello World!-水题

    Hello World! Time limit: 1.000 seconds When you first made the computer to print the sentence "H ...

  5. HDU1016(素数环)

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...

  6. oracle数据泵备份与恢复库

    假如  导出库的用户名是tiger,密码是1  导入到用户名是scott,密码是1 备份库 expdp tiger/1@orcl dumpfile=expdp.dmp DIRECTORY=dpdata ...

  7. 利用JAVA API远程进行HDFS的相关操作

    学习HDFS有一段时间了,现在把自己总结的HDFS的相关操作代码展示给大家. 主要有HDFS的增删改查,文件的追加,windows本地文件的上传,hdfs文件的下载,文件重命名,创建目录,文件是否存在 ...

  8. javascript中window.location.search的用法和作用。

    用该属性获取页面 URL 地址: window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostnam ...

  9. util包就是用来放一些公用方法和数据结构的

    util包就是用来放一些公用方法和数据结构的

  10. 【编程技巧】addSubview和insertSubview的区别

    addSubview 是将view加到所有层的最顶层 相当于将insertSubview的atIndex参数设置成view.subviews count 即 [view addSubview:onev ...