<!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. [go]匿名结构体

    匿名结构体声明 使用匿名结构体 声明并初始化

  2. eclipse syso 自动补全设置方法

    eclipse syso 自动补全设置方法   转  https://blog.csdn.net/sinat_23536373/article/details/76512390   经常遇到打”sys ...

  3. Handler处理消息

    UI主线程通过Looper循环查询消息队列UI_MQ,当发现有消息存在时会将消息从消息队列中取出.首先分析消息,通过消息的参数判断该消息对应的Handler,然后将消息分发到指定的Handler进行处 ...

  4. 基于layui的表格异步删除,ajax的简单运用

    h话不多说,看图,点击删除,出现确认框,然后点击确认删除,直接删除数据, 因为是基于面向过程的,没有用php框架写,所以有3个文件: 第一个文件:data.php:用于从数据库中获取数据 <?p ...

  5. Java中非静态成员变量、静态成员变量的初始化时机

    转: Java中非静态成员变量.静态成员变量的初始化时机. 2018年05月22日 11:48:11 SilenceCarrot 阅读数 421   版权声明:技术就要分享才有意思,欢迎大家分享(注明 ...

  6. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  7. Dubbo架构与底层实现

    一.Dubbo的设计角色 (1)系统角色Provider: 暴露服务的服务提供方.Consumer: 调用远程服务的服务消费方.Registry: 服务注册与发现的注册中心.1Monitor: 统计服 ...

  8. Laravel的Nginx重写规则--让路由支持末尾加斜线

    默认laravel路由末尾不能加/,如果加了斜线会报404 要想支持url末尾的斜线需要在public/index.php加入如下代码: $_SERVER['REQUEST_URI'] = trim( ...

  9. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  10. android#编写一个聊天界面

    摘自<第一行代码>——郭霖 既然是要编写一个聊天界面,那就肯定要有收到的消息和发出的消息.上一节中我们制作的message_left.9.png可以作为收到消息的背景图,那么毫无疑问你还需 ...