本文为博主原创，未经允许不得转载：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

    <body>

        <div id="app" >

            <h1>电影列表</h1>

            <ul>

                <!--别名 in 表达式(数组的表达式)

                    以下的index为索引

                -->

                <li v-for="(title,index) in movies">{{title}}({{index}})</li>

            </ul>

            <table>

                <thead>

                    <td>员工姓名</td>

                    <td>职位</td>

                    <td>公司</td>

                    <td>索引</td>

                </thead>

                <tbody>

                    <tr v-for="(person,index) in persons">

                        <td>{{person.name}}</td>

                        <td>{{person.title}}</td>

                        <td>{{company}}</td>

                        <td>{{index}}</td>

                    </tr>

                </tbody>

            </table>

            <div v-for="name in person">

                {{name}}

            </div>

            <!--循环一个对象的属性-->

            <div v-for="(name,prop,index) in person">

                {{prop}} : {{name}}---{{index}}

            </div>

        </div>

        <script>

            //vue指令语法 v-指令名字+:+指令的参数=指令的表达式

            var vm = new Vue({

                el:"#app",

                data:{

                    movies: ["妖猫传","芳华","至暗时刻"],

                    persons:[{

                        name:"liu",

                        title:"vue"

                    },{

                        name:"xiaoming",

                        title:"javascript"

                    },{

                        name:"xiaohua",

                        title:"css"

                    }],

                    company:"vue",

                    person:{

                        name:"liu",

                        firstName:"wei",

                        age:10

                    }

                }

            })

        </script>

     </body>

</html>

使用效果如图所示：

Vue学习五：v-for指令使用方法的更多相关文章

  1. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

  2. vue学习(五) 访问vue内部元素或者方法

    //html <div id="app"> <input type="button" value="ok" v-bind: ...

  3. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  4. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  5. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  6. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  7. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  8. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

  9. Vue学习一：{{}}html模板使用方法

    本文为博主原创,未经允许不得转载: 之前自学了vue,在项目中应用了vue,由于是第一次使用,感觉非常强大,使用也非常方便,趁有时间,总结一下vue学习过程中 各个指令的使用方法,只要掌握了vue的指 ...

随机推荐

  1. QDialog 使用Demo

    [1].pro QT += core gui greaterThan(QT_MAJOR_VERSION, ): QT += widgets TARGET = TestDialog TEMPLATE = ...

  2. MyDO

    编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能提交测试代码和运行结果截图. od -tx -tc XXX是输出文件的十六进制数和ASCII字符或 ...

  3. 设计模式之Bridge（桥接）（转）

    Bridge定义 : 将抽象和行为划分开来,各自独立,但能动态的结合. 为什么使用? 通常,当一个抽象类或接口有多个具体实现(concrete subclass),这些concrete之间关系可能有以 ...

  4. 【转】求职面试-HR会问你什么问题？

    前言 面试是程序员们经常探讨的话题,只要你通过前面的技术面,最后一面必然是HR面试,基本上到了这关你离Offer的距离应该不会太远了,但有的公司的HR是有刷入的权利,如果你并不能很好的应对HR的问题, ...

  5. flask 数据库操作（增删改查）

    数据库操作 现在我们创建了模型,生成了数据库和表,下面来学习常用的数据库操作,数据库操作主要是CRUD,即Create(创建).Read(读取/查询).Update(更新)和Delete(删除). S ...

  6. flask框架----上下文管理

    一.上下文管理相关知识点: a.类似于本地线程 创建Local类: { 线程或协程唯一标识: { 'stack':[request],'xxx':[session,] }, 线程或协程唯一标识: { ...

  7. ubuntu_python_environment

    参考:http://blog.csdn.net/kingppy/article/details/13080919 参考:http://blog.csdn.net/zhaobig/article/det ...

  8. ubuntu 18.04下安装Java

    参照以下链接,这个是我找到的最易上手的学习教程了 https://blog.csdn.net/sangewuxie/article/details/80958611 按其步骤,我下载的是Java 11 ...

  9. i2c调试碰到的问题

    i2c eeprom i2cget两次结果不一致 i2cset没成功. device里只看到50,却冒出了51地址. i2ctools是针对8bit地址的,而我们的eeprom都是用16bit add ...

  10. pycharm+PyQt5+python最新开发环境配置，踩坑过程详解

    安装工具:Pycharm 专业版2017.3PyQT5python3 pyqt5-tools 设置扩展工具的参数找到setting->tools->external tools,点击加号新 ...