语法发生了变化：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. java导出Excel 好文收藏

    http://www.cnblogs.com/Damon-Luo/p/5919656.html https://www.cnblogs.com/klguang/p/6425422.html

  2. Vue2.x directive自定义指令

    directive自定义指令 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令. 注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的 ...

  3. Start Developing iOS Apps (Swift) 开始开发iOS应用(Swift)

    http://www.cnblogs.com/tianjian/category/704953.html 构建基础的用户界面 Build a Basic UI http://www.cnblogs.c ...

  4. PythonWeb开发教程（一），开发之前需要准备什么

    什么是web开发呢,其实就是开发一个网站了.那开发网站需要用到哪些知识呢 1.python基础,因为用python开发的,所以python指定要会,最起码你也得会条件判断,循环,函数,类这些知识: 2 ...

  5. vue项目实现按需加载的3种方式：vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件. 举例如下: { path: '/promisedemo ...

  6. winform 程序调用及参数调用

    调用程序: // 新轮廓 -> 调用轮廓扫描程序        private void toolStripMenuItem9_Click(object sender, EventArgs e) ...

  7. POJ1006——中国剩余定理

    题目:http://poj.org/problem?id=1006 中国剩余定理:x= m/mj + bj + aj 讲解:http://www.cnblogs.com/MashiroSky/p/59 ...

  8. SVN 环境搭建 需要注意的地方

    一. 服务器上安装的软件: 先 安装 Subversion 下载的地址:http://www.sliksvn.com/en/download 安装 TortoiseSVN    下载地址:http:/ ...

  9. elastic-job 分布式定时任务框架 在 SpringBoot 中如何使用（一）初始化任务并定时执行

    第一篇需要实现一个最简单的需求:某个任务定时执行,多台机子只让其中一台机子执行任务 一.安装 分布式应用程序协调服务 zookeeper,安装步骤在链接里面 Linux(Centos7)下安装 zoo ...

  10. sql表设计

    数据库实际上是系统逻辑在磁盘上的固化,是信息河流的蓄水池. 数据库的表应有如下类型 1)类表.配置表.作为业务逻辑基本的名字,状态的定义,作为构建逻辑世界的最基础框架,解释框架的框架. 特点,数据不会 ...