<!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. [Java]用 MessageFormat 拼接组合字符串

    package com.hy; import java.text.MessageFormat; public class Test3 { public static void main(String[ ...

  2. 解决Android Studio 升级时提示 Connection failed. Please check your network connection and try again问题

    一,问题: 无论mac还是windows可能都会出现这个问题,解决方案大同小异,就是修改VMOptions而已. 解决方案: Windows: 在\Android Studio\bin目录下找到 st ...

  3. Sass安装与Webstorm File Watcher配置

    一.Sass安装 ruby安装 mac系统默认安装了ruby,可以直接跳过此步骤,linux和windows需要安装ruby环境. windows安装ruby环境: 到ruby官网下载自己系统适用的版 ...

  4. Scala面向对象02

  5. 【转载】oracle中decode函数用法

    1.DECODE的语法:DECODE(value,if1,then1,if2,then2,if3,then3,...,else).表示假设value 等于if1时,DECODE函数的结果返回then1 ...

  6. RocketMQ之八：水平扩展及负载均衡详解

    RocketMQ是一个分布式具有高度可扩展性的消息中间件.本文旨在探索在broker端,生产端,以及消费端是如何做到横向扩展以及负载均衡的. NameServer集群 提供轻量级的服务发现和路由.每个 ...

  7. windows端口映射

    1. 查看netsh interface portproxy show all 2. 添加端口映射转发netsh interface portproxy add v4tov4 listenaddres ...

  8. 自动化运维：（2）Shell 编程的流程控制

    一. if语句 1.单分支if语句——单一条件,只有一个输出 #!/bin/bash # 单if语句的使用场景 if [ "$1" == "nan" ] the ...

  9. 2019 Unreal Open Day —— 英特尔携手 UE 助力游戏开发生态建设

    2019 年 5 月 8 日-5 月 9 日,一年一度的 Unreal Open Day 虚幻引擎技术开放日在上海举办,该活动由 Epic Games 中国倾力打造,是面向虚幻引擎开发者规格最高.规模 ...

  10. 【POJ - 3262】Protecting the Flowers（贪心）

    Protecting the Flowers 直接中文 Descriptions FJ去砍树,然后和平时一样留了 N (2 ≤ N ≤ 100,000)头牛吃草.当他回来的时候,他发现奶牛们正在津津有 ...