语法发生了变化：http://blog.csdn.net/sinat_35512245/article/details/53966788

新数组语法 
value in arr 
(value, index) in arr

新对象语法 
value in obj (value, key) in obj 
(value, key, index) in obj

对 Vue.js——60分钟快速入门 的demo修改之后的源码为：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

    </head>

    <body>

        <div id="app">

            <fieldset>

                <legend>

                    Create New Person

                </legend>

                <div class="form-group">

                    <label>Name:</label>

                    <input type="text" v-model="newPerson.name"/>

                </div>

                <div class="form-group">

                    <label>Age:</label>

                    <input type="text" v-model="newPerson.age"/>

                </div>

                <div class="form-group">

                    <label>Sex:</label>

                    <select v-model="newPerson.sex">

                    <option value="Male">Male</option>

                    <option value="Female">Female</option>

                </select>

                </div>

                <div class="form-group">

                    <label></label>

                    <button @click="createPerson">Create</button>

                </div>

        </fieldset>

        <table>

            <thead>

                <tr>
　　　　　　　　　　　　<th>Index</th>

                    <th>Name</th>

                    <th>Age</th>

                    <th>Sex</th>

                    <th>Delete</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(person,index) in people">

                    <td>{{ index }}</td>

                    <td>{{ person.name }}</td>

                    <td>{{ person.age }}</td>

                    <td>{{ person.sex }}</td>

                    <td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>

                </tr>

            </tbody>

        </table>

        </div>

    </body>

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

    <script>

        var vm = new Vue({

            el: '#app',

            data: {

                newPerson: {

                    name: '',

                    age: 0,

                    sex: 'Male'

                },

                people: [{

                    name: 'Jack',

                    age: 30,

                    sex: 'Male'

                }, {

                    name: 'Bill',

                    age: 26,

                    sex: 'Male'

                }, {

                    name: 'Tracy',

                    age: 22,

                    sex: 'Female'

                }, {

                    name: 'Chris',

                    age: 36,

                    sex: 'Male'

                }]

            },

            methods:{

                createPerson: function(){

                    this.people.push(this.newPerson);

                    // 添加完newPerson对象后，重置newPerson对象

                    this.newPerson = {name: '', age: 0, sex: 'Male'}

                },

                deletePerson: function(index){

                    // 删一个数组元素

                    this.people.splice(index,1);

                }

            }

        })

    </script>

</html>

Vue2.0中v-for迭代语法变化（key、index）的更多相关文章

  1. Vue2.0中v-for迭代语法变化（key、index）【转】

    转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...

  2. Vue2.0 中，“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么？（转）

    https://www.zhihu.com/question/51907207?rf=55052497 徐飞 在我看来,渐进式代表的含义是:主张最少. 每个框架都不可避免会有自己的一些特点,从而会对使 ...

  3. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  4. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  5. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  6. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  7. router-view在vue2.0中不显示，解决方法

    学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...

  8. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  9. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  10. vue2.0中，由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

随机推荐

  1. 【HAOI2014】贴海报

    弱省中的弱省……原题: Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙.张贴规则如下:1 ...

  2. setTimeout设置为0的作用

    调用方式:iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])功能:Evaluates an expression afte ...

  3. webstorm快捷键汇总

    查找替换 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ctrl+shift+R 通过文件名快速查找工程内的文件(必记) ctrl+shift+alt+N ctrl+s ...

  4. c2java Greedy 之任务调度

    近期调试一个javaproject的时候,我遇到不是期望的输出结果时.是这么干的: A1凝视掉抛出的异常: A2加打印对照异常输入和正常输入. A3进一步加打印缩小范围. 事实上仅仅需:B1静下心来细 ...

  5. GOOGLE高级搜索的秘籍

    一.摘要 本文内容来源自互联网,全面的介绍Google搜索的各种功能和技巧. 二.GOOGLE简介 Google(http://www.google.com/)是一个搜索引擎,由两个斯坦福大学博士生L ...

  6. Vuejs项目的Webpack2构建优化

    最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...

  7. Java 虚拟机（JVM）

    java 中的 JIT (Just in time) compiler:即时编译器.

  8. 【selenium】HTMLTestRunner测试报告生成

    __author__ = 'Administrator' #coding=utf-8 from selenium import webdriver from selenium.webdriver.co ...

  9. 实验 1 Java 运行环境的安装、配置与运行

    一.实验目的     1． 掌握下载 Java SDK 软件包.     2． 掌握设置 Java 程序运行环境的方法.     3． 掌握编写与运行 Java 程序的方法.     4． 了解 Ja ...

  10. jenkins 使用的python 不是指定的python 的解决方法

    构建的时候加上要使用python的解析器路径 终端 which python 可以找到 python编辑器里面 import os os.system("which python" ...