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. C#中string类型是值类型还是引用类型？（转）

    出处:https://www.cnblogs.com/dxxzst/p/8488567.html .Net框架程序设计(修订版)中有这样一段描述:String类型直接继承自Object,这使得它成为一 ...

  2. 使用bat批处理文件定时自动备份sqlserver数据库

    一.创建一个sql文件,在里面写入以下代码: USE MasterGOdeclare @str varchar(100)set @str='D:\sqlserver14backup\CDB\'+rep ...

  3. java常用设计模式八：代理模式

    一.概述 代理模式是指客户端并不直接调用实际的对象,而是通过调用代理,来间接的调用实际的对象. 其特征是代理类与委托类有同样的接口,真正的核心业务逻辑还是在实际对象里面. 二.为什么要使用代理模式 当 ...

  4. IDEA有用插件总结

    IDEA要查看哪些插件起效了可以通过.IntellijIdeaXxx/config/plugins/availables.xml里查看: 一:Lombok插件,里面很多注解都可以省略许多冗余的代码: ...

  5. ckeditor粘帖上传图片控件-更新-2.0.15版本

    泽优Word图片上传产品测试 泽优Word图片上传控件WordPaster2,基于php开发环境测试. 泽优软件官网Word图片上传产品介绍页面: http://www.ncmem.com/webap ...

  6. FastDFS分布文件系统Java客户端集成

    参考博客:http://blog.csdn.net/xyang81/article/details/52847311 官网Java客户端源代码: https://github.com/happyfis ...

  7. python list 和 tuple, dict 用于迭代代价

    #!/usr/bin/env python #-*- coding:utf-8 -*- import time start = time.time() for i in range(1000000): ...

  8. 4、C语言的编译过程链

    在学校学C语言的时候,很多人都不是很注重编译过程链,但是其实编译过程是项目过程中很重要的一部分,有时候有些语法诸如static.volatile等关键词不理解时大多数都是对整个C语言编译链没有进行过详 ...

  9. 如何防止ElasticSearch集群出现脑裂现象

    什么是“脑裂”现象? 由于某些节点的失效,部分节点的网络连接会断开,并形成一个与原集群一样名字的集群,这种情况称为集群脑裂(split-brain)现象.这个问题非常危险,因为两个新形成的集群会同时索 ...

  10. Scala_基本语法

    基本语法 声明值和变量 Scala有两种类型的变量: val:是不可变的(变量的引用不可变),在声明时就必须被初始化,而且初始化以后就不能再赋值: var:声明的时候需要进行初始化,初始化以还可以再对 ...