vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引'

解决问题的代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        <input type="button" value="添加" @click="add">

        <ul>

            <li v-for="val in arr" track-by="$index">

                {{val}}

            </li>

        </ul>

    </div>

    <script>

        var vm=new Vue({

            data:{

                arr:['apple','pear','orange']

            },

            methods:{

                add:function(){

                    this.arr.push('tomato');

                }

            }

        }).$mount('#box');

    </script>

</body>

</html>

vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'的更多相关文章

  1. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染

    一.目录结构分析 node_modules 项目所需要的各种依赖 src 开发用的资源 assets 静态资源文件 App.vue 根组件 main.js 配置路由时会用 .babelrc 配置文件 ...

  3. Excel常见操作，重复数据,去除数据关联

    Eecel对一个数据进行操作后按住右下角的十字架往下拉就可以对下面的操作进行相同 的操作,所以只需先对一个数据进行操作,再拉下来就可以了 通过公式处理的数据跟其它数据有关联 需要对这些数据进行去除它们 ...

  4. vue教程1-03 v-for循环

    vue教程1-03 v-for循环 v-for循环: v-for="name in arr" {{value}} {{$index}} v-for="name in js ...

  5. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  6. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  7. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  8. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  9. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

随机推荐

  1. vetur插件提示 [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives

    错误如下图所示: 错误提示: [vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.Re ...

  2. Linux无法解析gitlib的地址--修改dns

    搞的一个js鉴权认证,先跳转到 gitlib,登录后跳转到我们公司测试接口的页面: 公司gitlib地址:gitlab.cmread.com [INFO][2018-12-17 15:29:00,18 ...

  3. VMware Authorization Service不能启动 VMware虚拟机状态已挂起无法恢复解决方案

    在网上看说在服务里面启动 但也是不能用 电脑上说是WINDOWS无法启动VMware Authorization Service服务(位于本地计算机上)错误:1068 依赖服务或组无法启动 这个很简单 ...

  4. eclipse中tomcat启动设置参数

      今天新接触一个项目,使用java+flex做的单机项目,由于模块太多,打成war后就有300M左右了.所以,启动的时候,比较慢,超过了e eclipse中默认的45s,当我进行修改启动事件后,有一 ...

  5. matlab画无向图，基于坐标的无向图联系作者

    %函数名netplot %使用方法输入请help netplot %无返回值 %函数只能处理无向图 %作者:tiandsp %最后修改: function netplot(A,flag) %调用方法输 ...

  6. Flex布局（CSS Flexbox）

    参考:Flex 布局语法教程 Flex布局是什么? Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局 注意:设为Fle ...

  7. 2.2.2synchronized同步代码块的使用

    当两个并发线程访问同一个对象object中的synchronized(this)同步代码块时,一段时间内只能有一个线程执行,另一个线程必须等待期执行完才能执行. package com.cky.bea ...

  8. 20145232 韩文浩 《Java程序设计》第3周学习总结

    教材学习内容总结 在第三章中,知道了Java可区分为基本类型和类类型两大类型系统,其中类类型也称为参考类型.在这一周主要学习了类类型. 对象(Object):存在的具体实体,具有明确的状态和行为 类( ...

  9. 声笔飞码GB2312单字效率分析

    -----------------------声笔飞码强字方式单字效率分析-------------------------- 2   keys: 567       items, 381900209 ...

  10. python模块补充

    一.模块补充 configparser 1.基本的读取配置文件 -read(filename) 直接读取ini文件内容 -sections() 得到所有的section,并以列表的形式返回 -opti ...