<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <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">

                {{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>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <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>

vue12 循环添加重复数据的更多相关文章

  1. 使用pymysql循环删除重复数据，并修改自增字段偏移值

    创建表: CREATE TABLE `info` ( `id` tinyint NOT NULL AUTO_INCREMENT, `name` varchar(20) NOT NULL, PRIMAR ...

  2. mongodb删除重复数据

    注:mongodb当前版本是3.4.3   插入六条数据:   查询存在重复的数据:   查询并循环删除重复数据:   删除语句解析: db.userInfo.aggregate([     {   ...

  3. DataGridView添加的数据最后一步无法生效的问题。

    在做项目时,需要使用到大量固定的参数,使用时只需修改一部分定值即可,所以就选用DataGridView控件进行循环添加,数据添加完成,一切正常,但是在修改数据时发现,每一次修改的数据的操作的最后一步总 ...

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

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

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

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

  6. mysql删除多个重复数据，多个字段添加唯一性索引

    需求:删除station_id.ab_data_time.item_code_id.data_cycle.ab_value 字段重复的记录 #查询重复的数据 select b.id,b.station ...

  7. Oracle 数据库表中已有重复数据添加唯一键（唯一约束）

    Oracle 数据库表中已有重复数据添加唯一键(唯一约束) 问题描述 以 demo 举例,模拟真实场景. 表 TEST_TABLE 有如下字段和数据:id 是主键,code 没有设置键和索引 ID C ...

  8. List循环添加数据覆盖问题

    问题:java开发时,当我们使用List.add();循环添加数据,有时会出现前面添加的数据会被后面覆盖的现象.这是怎么回事尼? 会覆盖数据的代码 package com.boot.test; imp ...

  9. 关于iOS去除数组中重复数据的几种方法

    关于iOS去除数组中重复数据的几种方法   在工作工程中我们不必要会遇到,在数组中有重复数据的时候,如何去除重复的数据呢? 第一种:利用NSDictionary的AllKeys(AllValues)方 ...

随机推荐

  1. 【BZOJ4940】【YNOI2016】这是我自己的发明

    阅读此篇文章前请先跟我大喊三声:dllxl!dllxl!dllxl! 咳咳. 题意: Description 给一个树,n 个点,有点权,初始根是 1. m 个操作,每次操作: 1. 将树根换为 x. ...

  2. mysql 定时每秒插入一条数据

    1.创建表 2.创建存储过程 CREATE PROCEDURE user()INSERT INTO user(name,sex) VALUES ('1111','1'); 3.创建定时器 CREATE ...

  3. suse 11 sp4 bond 网卡 mode0模式

    开启网卡: ifocnfig eth1 up 点亮网卡ethtool eth1 db2:~ # cat /etc/sysconfig/network/ifcfg-bond0 DEVICE='bond0 ...

  4. 洛谷 P1541 乌龟棋 （四维费用背包）

    一开始直接用01背包 后来发现这个物品和位置有关. 也就是价值不是固定的 后来看了题解 看了卡片最多就4 所以这是一个四维费用的背包, 每一维是卡片的数量 价值就是当前的位置的价值. 但是与常规的背包 ...

  5. Failed to initialize component [Connector[HTTP/1.1-8086]]

    严重: Failed to initialize end point associated with ProtocolHandler ["http-apr-8086"] java. ...

  6. Qt之QFileIconProvider

    简述 QFileIconProvider类为QDirModel和QFileSystemModel类提供了文件图标. 简述 共有类型 公共函数 示例 IconType 效果 源码 QFileInfo 效 ...

  7. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  8. 怎么样才算是精通 C++？

    C++是一门非常奇妙的语言.让人又爱又恨. 在知乎上看到的一个帖子.怎么样才算是精通C++,这里节选一些精彩的回复. 链接:http://www.zhihu.com/question/20201972 ...

  9. EJB3.0高速入门项目开发步骤

    EJB3.0开发步骤 1.   开发环境 IDE开发工具:Eclipse Java EE IDE for Web Developers EJB容器:jboss-4.2.3.GA 后台数据库:MysQL ...

  10. BZOJ4259: 残缺的字符串 & BZOJ4503: 两个串

    [传送门:BZOJ4259&BZOJ4503] 简要题意: 给出两个字符串,第一个串长度为m,第二个串长度为n,字符串中如果有*字符,则代表当前位置可以匹配任何字符 求出第一个字符串在第二个字 ...