vue.js（09）--v-for中的key
v-for中key的使用注意事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for中的key</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
id:<input type="text" v-model="id">
name:<input type="text" v-model="name">
<input type="button" value="增加" @click="add">
<p v-for="(item,i) in arr" :key="item.id">
<!-- v-for循环key使用时只能使用number获取string（item.id），而且必须使用v-bind属性绑定的形式指定key的值-->
<input type="checkbox" name="" id=""> id:{{item.id}} name:{{item.name}}
</p>
<!-- v-for遍历数组中的对象 -->
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
arr:[
{'id':1,'name':'齐怪1'},
{'id':2,'name':'齐怪2'},
{'id':3,'name':'齐怪3'},
],
id:'',
name:''
},
methods:{
add() {
this.arr.unshift({'id':this.id,'name':this.name})
}
}
})
</script>
</body>
</html>
vue.js（09）--v-for中的key的更多相关文章
- Vue.js 在 webpack 脚手架中使用 cssnext
Vue.js 的 webpack脚手架默认已经使用了 PostCSS 的 autoprefixer 的功能. 如果想使用下一代 css语法,即cssnext: 1. 安装依赖 npm install ...
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- 解决vue.js在编写过程中出现空格不规范报错的情况
找到build文件夹下面的webpack.base.conf.js文件. 然后打开该文件,找到图下这段代码,把他注释掉. 注释掉之后,再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦.因为这 ...
- js获取json对象中的key和value,并组成新数组
//比如有一个json var json = {"name" : "Tom", "age" : 18}; //想分别获取它的key 和 va ...
- Vue.js——60分钟快速入门 开发· webpack 中文文档
转载于:http://www.cnblogs.com/keepfool/p/5619070.html http://www.css88.com/doc/webpack2/guides/get-star ...
- vue.js引用出错-script代码块放在head和body中的区别
这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个 ...
- 前端之Vue.js库的使用
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
- Vue.js先入个门看看
使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
随机推荐
- Mongodb副本集实现及读写分离
前言 地址:https://blog.csdn.net/majinggogogo/article/details/51586409 作者介绍了,mongodb副本集的读写原理,原理是通过代码层来实现. ...
- 【学习】010 Netty异步通信框架
Netty快速入门 什么是Netty Netty 是一个基于 JAVA NIO 类库的异步通信框架,它的架构特点是:异步非阻塞.基于事件驱动.高性能.高可靠性和高可定制性. Netty应用场景 1.分 ...
- vue2.0 通信
一.父子组件通信 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息 具体机制如下图: 1.父组件传递数据给子组件 ( parent ==> child ...
- Java8 的一些新特性的学习理解
近期在学习队列相关的一些知识,在学习过程中发现Iterable<T>接口中新增了两个新的方法,出于好奇,就想知道这是什么东东,干什么用的.俗话说:实践出真知,所以就有了以下反复的测试. 先 ...
- ZROI2019 提高十连测
额 掰手指头一数 特么又是第三年十连测了= = 2017一场没打 那时候好像一场比赛也就100人左右 2018前几场还都好好补了 后来开始放飞自我了 这时候一场有150人还多了 2019想让今年的No ...
- NASA CEA 安装指南
有用的网站: http://www.engr.colostate.edu/~marchese/combustion08/cec.html 1 把三个压缩包解压到同一个Ubuntu文件夹CEAexec下 ...
- Cenos7下nginx+mysql+php环境的搭建
首先更新系统软件 1 $ yum update 第一步:安装nginx 1.安装nginx源 1 $ yum localinstall http://nginx.org/packages/centos ...
- eclipse中maven工程添加本地库至Maven Dependencies
1.WEB-INF文件夹下添加lib文件夹,文件夹下添加demo-client-0.1-SNAPSHOT.jar 2.pom.xml中配置如下代码: <dependency> <gr ...
- Node.js - 使用 Express 和 http-proxy 进行反向代理
安装 Express 和 http-proxy npm install --save express http-proxy 反向代理代码 proxy.js var express = require( ...
- EF框架之——Code First以及踩过的这些“坑”
传送门 Code First使用步骤 Code First报错和解决办法 以前在上海做了一段时间的Asp.net,基本用的都是.net自带的EF框架连接数据库,不过都是用的Model First,最近 ...