<!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. easyUI之练习

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  2. Ubuntu下使用AMD APP编写OpenCL程序

    对于Ubuntu或其近亲(Lubuntu.Kubuntu.Mint等)编写OpenCL程序也不会太难.由于本例用的是AMD APP SDK,因此需要AMD的GPU以及相关驱动.首先,去AMD官网下载G ...

  3. NLP之电影评分数据的情感分析

    1.基于词袋模型的逻辑回归情感分类 # coding: utf-8 import re import numpy as np import pandas as pd from bs4 import B ...

  4. 怎么让mysql的id从0开始

    有时候我们在测试网站的时候,删除测试数据导致id不是从0开始,那如果想id是从0开始怎么办呢?mysql默认自增ID是从1开始了,但当我们如果有插入表或使用delete删除id之后ID就会不会从1开始 ...

  5. Jmeter接口上传文件

    一.使用抓包软件抓取该接口,查看参数(图例使用的是charles) 可以看到上传文件的参数名是file1 二.把抓取到的普通参数都放在参数这一栏里,如图所示,不要在意马赛克 三.参数名称写在如图所示的 ...

  6. v-for与v-if的优先级

    原文地址 永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users ...

  7. Centos7端口映射

    开启tomcat后,访问需要加端口号8080才能访问,在不改变tomcat默认端口号的情况下,添加nat的端口映射,将80端口映射到8080端口,即可实现不加8080访问. 向nat表的 PREROU ...

  8. PHP学习（7）——面向对象（上）

    1.理解面向对象的概念 面向对象软件的一个重要优点是支持和鼓励封装的能力.封装也叫数据隐藏. 在面向对象的软件中,对象是一个被保存数据和操作这些数据的操作方法的唯一.可标识的集合. 对象可以按类进行分 ...

  9. JS字符串格式化~欢迎来搂~~

    /* 函数:格式化字符串 参数:str:字符串模板: data:数据 调用方式:formatString("api/values/{id}/{name}",{id:101,name ...

  10. 快速排序的js实现

    该方法的基本思想是: 1．先从数列中取出一个数作为基准数. 2．分区过程,将比这个数大的数全放到它的右边,小于或等于它的数全放到它的左边. 3．再对左右区间重复第二步,直到各区间只有一个数. var ...