<!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. github上打开或下载过慢的问题解决

    1.用站长工具查询github.com http://tool.chinaz.com/dns?type=1&host=github.com&ip= 2.找到“美国[海外]”项查到的ip ...

  2. 多目标优化算法（一）NSGA-Ⅱ（NSGA2）（转载）

    多目标优化算法(一)NSGA-Ⅱ(NSGA2) 本文链接:https://blog.csdn.net/qq_40434430/article/details/82876572多目标优化算法(一)NSG ...

  3. LC 974. Subarray Sums Divisible by K

    Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have a sum ...

  4. linux服务之redis

    redis wget http://download.redis.io/releases/redis-4.0.6.tar.gzcd redis-4.0.6makecd src/./redis-serv ...

  5. HmacSha1加密-java

    package com.test; import javax.crypto.Mac; import javax.crypto.spec.SecretKeySpec; import org.apache ...

  6. DELPHI ClientData使用详解

    在三层结构中,TClientDataSet的地位是不可估量的,她的使用正确与否,是十分关键的,本文从以下几个方面阐述她的使用,希望对你有所帮助. 1.动态索引procedure TForm1.DBGr ...

  7. Canal——增量同步MySQL数据到ElasticSearch

    1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本:       Kibana:6.x版本:     Canal.deployer:1 ...

  8. 前端学习之JavaScript(1)

    目录 一. JavaScript简介 二. 第一个JavaScript代码 三. 基本数据类型 四. 运算符 五. 数据类型转换 六. 流程控制 七. 常用内置对象 八. 函数 一. JavaScri ...

  9. 搭建hadoop2.4.1

    前期准备: 1.系统基本形况: ip hostname role server loginName 192.168.1.101 h1 NameNode,ResourceManager centos7_ ...

  10. IntelliJ IDEA入门之常用配置以及问题解决(持续更新中)

    软件版本: IntelliJ IDEA 2019.1.1(Ultimate Edition) 运行环境: JDK1.8, Tomcat8.0, Maven3.6 我们在学习新的无论是jar包, 框架, ...