//html
<div id="app">
  <div>
   <label>id
    <input type="text" v-model="id"/>
   </label>
  
   <label>name
     <input type="text" v-model="name"/>
   </label>    <input type="button" value="添加" @click="add"/>
  </div>
  //注意v-for循环的时候, key属性只能使用string或者number
  //注意key在使用的时候 必须使用v-bind 属性绑定的形式,指定key的值
  <p v-for="item in list" v-bind:key="item.id">
    <input type="checkbox"/>{{item.id}}---
    {{item.name}}
  </p>
</div> //script
<script>
  var vm = new Vue({
    el:'app',
    data:{
      id:'',
      name:'',
      list:[
        {id:1, name:'韩非'},
        {id:2, name:'魏庄'},
        {id:3, name:'张良'},
        {id:4, name:'紫女'}
      ]
    },
    methods:{//methods中定义了当前vue实例中所有可用的方法
      add(){
        this.list.unshift({id: this.id, name: this.name})
      }
    }
  })
</script>

注意:

在组件中,使用v-for循环的时候,或者在一些特殊情况下,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串、数字类型的key,并且要为key使用v-bind

vue学习(十一) v-for使用的注意事项:2.2.0+之后的版本里,当在组件中使用v-for时,key是必须的,它是用来表示唯一身份的的更多相关文章

  1. Vue学习(2)---v-指令和组件

    Vue中的指令 Vue中以带有前缀V-的属性被称为指令(带有v表示他们是Vue提供的特殊attribute) 一个v-bind的例子 <div id="app" v-bind ...

  2. vue学习之插槽

    插槽 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 个人理解:我感觉插槽就是父组件控制插槽 ...

  3. vue学习(四)插槽

    一 匿名插槽 // 语法 Vue.component('MBtn', { template: ` <button> <slot></slot> </butto ...

  4. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  5. vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    Vue.js 父子组件通信的十种方式 前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.找到了两种方法可以同时添加自定义参数的方 ...

  6. 一步一步学习Vue(十一)

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  7. vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

    一.路由的配置 路由  vue-router 1. 什么是路由? 路由相当于一个配置对象 路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面 ...

  8. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  9. vue学习心得

    前言 使用vue框架有一段时间了,这里总结一下心得,主要为新人提供学习vue一些经验方法和项目中一些解决思路. 文中谨代表个人观点,如有错误,欢迎指正. 环境搭建 假设你已经通读vue官方文档(文档都 ...

随机推荐

  1. Socket连接和Http连接

    Socket连接与HTTP连接我们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如果没有应用层,便无法识别数据内容,如果想要使传输的数据有意义,则必须使用到应用层协议,应用层协议有 ...

  2. 设计模式系列之中介者模式(Mediator Pattern)——协调多个对象之间的交互

    说明:设计模式系列文章是读刘伟所著<设计模式的艺术之道(软件开发人员内功修炼之道)>一书的阅读笔记.个人感觉这本书讲的不错,有兴趣推荐读一读.详细内容也可以看看此书作者的博客https:/ ...

  3. 2020_06_18Mysql事务

    1.事务的基本介绍 1.概念:一个包含多个步骤的事务,被事务管理,要么同时成功,要么同时失败. 2.操作: 2.1 开启事务:start transaction; 2.2 回滚:rollback; 2 ...

  4. Day12-微信小程序实战-交友小程序-搭建服务器与上传文件到后端

    要搞一个小型的cms内容发布系统 因为小程序上线之后,直接对数据库进行操作的话,慧出问题的,所以一般都会做一个管理系统,让工作人员通过这个管理系统来对这个数据库进行增删改查 微信小程序其实给我们提供了 ...

  5. caffe的python接口学习(5)生成deploy文件

    如果要把训练好的模型拿来测试新的图片,那必须得要一个deploy.prototxt文件,这个文件实际上和test.prototxt文件差不多,只是头尾不相同而也.deploy文件没有第一层数据输入层, ...

  6. 关于线上一次DDOS攻击和阿里云DDOS防护相关内容

    问题 最近我们的一台阿里云服务器 (ECS,有公网IP,Nginx 服务器,开放了80,443),遭受到了DDOS攻击,主要攻击的行为是 攻击我们443 端口.发起大量的请求. 但是我们在 Nginx ...

  7. 手写SpringMVC框架(一)-------项目搭建

    SpringMVC处理请求的大致流程: 我们来开始着手手写一个SpringMVC框架. 新建一个springMVC项目,流程参见 SpringMVC框架搭建流程 引入servlet相关的jar包: & ...

  8. 版本管理工具(git)

    Git是一个开源的分布式版本控制系统 工作区: 电脑目录中,git_test文件夹就是一个工作区. 版本库: 在进行git操作的时候,会生成一个隐藏目录.git,这是git的版本库,其中stage(或 ...

  9. 【2003、2004 NOIp 入门组错题报告】

    2003: T4: 题目大意:  讲这么多话,其实就是求比当前序列大的序列中第m小的一个.可以每次找出比当前序列大的最小的一个序列.我们可以从后往前扫描,当当前这个数比后一个数小时,我们把它与它后面的 ...

  10. java语言基础(九)_final_权限_内部类

    final关键字 final关键字代表最终.不可改变的. 常见四种用法: 可以用来修饰一个类 可以用来修饰一个方法 还可以用来修饰一个局部变量 还可以用来修饰一个成员变量 1)修饰一个类 public ...