<!DOCTYPE html>

<html>

<head>

    <title>for循环</title>

</head>

<body>

<script type="text/javascript" src="vue2.js"></script>

<script type="text/javascript">

    window.onload=function(){

        new Vue({

            el:"#box",

            data:{

                list:['width','height','border']

            },

            methods:{

                add(){

                    this.list.push("back");

                }

            }

        })

    }

</script>

<div id="box">

    <input type="button" name="" value="添加" @click="add">

    <ul>

        <li v-for="(val,index) in list">

            {{val}} {{index}}

        </li>

    </ul>

</div>

</body>

</html>

vue2.0关于for循环 index的使用方法的更多相关文章

  1. 如何解决vue2.0 打包之后 打开index.html出现空白页

    如何解决vue2.0 打包之后 打开index.html出现空白页 1.打包之前修改三个文件       1.1.第一步,找到build文件,在webpack.prod.conf.js 第25行左右 ...

  2. vue2.0页面缓存和不缓存的方法

    // 模板中: <div class="home"> <keep-alive> <router-view v-if="$route.meta ...

  3. Vue2.0响应式原理以及重写数组方法

    // 重写数组方法 let oldArrayPrototype = Array.prototype; let proto = Object.create(oldArrayPrototype); ['p ...

  4. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  5. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

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

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

  7. Vue2.0 【第一季】第3节 v-for指令：解决模板循环问题

    目录 Vue2.0 [第一季] 第3节 v-for指令:解决模板循环问题 第三节 v-for 指令 一.基本用法: 二.排序 三.对象循环输出 Vue2.0 [第一季] 第3节 v-for指令:解决模 ...

  8. vue2.0有哪些变化

    vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...

  9. VUE2.0不可忽视的很多变化

    今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...

随机推荐

  1. mybatis多对多映射【学生与课程】

    1)如图 2)创建students.sql和courses.sql和middles.sql drop table middles; drop table students; drop table co ...

  2. error: atomic: 没有那个文件或目录

    Linux下编译的时候遇到一个问题,就是提示    error: atomic: 没有那个文件或目录 执行的命令是gcc -o myCXXLog myCXXLog.c 经过网上搜索,解决方法有二 (1 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_5-05熔断降级服务异常报警通知

    笔记 5.熔断降级服务异常报警通知实战     简介:完善服务熔断处理,报警机制完善 1.加入redis依赖         <dependency>             <gr ...

  4. vue项目报错：Unexpected tab character (no-tabs)

    eslint意思是检查规范代码 第一种方法: 新建项目的时候 第二种方法: 首先在项目的根目录下.eslintrc.js中加入一行代码:"no-tabs":"off&qu ...

  5. php上传文件夹

    用过浏览器的开发人员都对大文件上传与下载比较困扰,之前遇到了一个php文件夹上传下载的问题,无奈之下自己开发了一套文件上传控件,在这里分享一下.希望能对你有所帮助. 功能介绍: 树形目录导航.您可以通 ...

  6. lumen中间件中设置响应header

    <?php namespace App\Http\Middleware; use Closure; class BeforeMiddleware { public function handle ...

  7. HashPump用法

    做哈希长度扩展攻击的时候用到这个工具,但是没找到这个工具详解办法 我这篇不算是详解,只是收集例子做出的一个用法 HashPump一种在各种散列算法中利用散列长度扩展攻击的工具.目前支持的算法:MD5, ...

  8. python-Web-django-后台

    url: # member 处理 re_path('member/list/', member.list, name='member/list/'), re_path('member/list_par ...

  9. 利用ceph-deploy安装ceph

    手工安装https://www.jianshu.com/p/b8f085ca0307 在ceph所有节点上执行 1.配置hosts cat << EOF >> /etc/hos ...

  10. SpringCloud学习（五）路由网关(zuul)(Finchley版本)

    在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.智能路由.配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统.一个简单的微服务系统如下图: ...