vue教程1-03 v-for循环
v-for循环:
v-for="name in arr"
{{value}} {{$index}}

v-for="name in json"
{{value}} {{$index}} {{$key}}

v-for="(k,v) in json"
{{k}} {{v}} {{$index}} {{$key}}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                    arr:['apple','banana','orange','pear'],

                    json:{a:'apple',b:'banana',c:'orange'}

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for="value in arr">

                {{value}}   {{$index}}

            </li>

        </ul>

        <hr>

        <ul>

            <li v-for="value in json">

                {{value}}   {{$index}}  {{$key}}

            </li>

        </ul>

        <hr>

        <ul>

            <li v-for="(k,v) in json">

                {{k}}   {{v}}   {{$index}}  {{$key}}

            </li>

        </ul>

    </div>

</body>

</html>

vue教程1-03 v-for循环的更多相关文章

  1. vue教程2-05 v-for循环 重复数据无法添加问题 加track-by='索引'

    vue教程2-05 v-for循环 重复数据无法添加问题  加track-by='索引' 解决问题的代码示例: <!DOCTYPE html> <html lang="en ...

  2. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  3. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  4. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  5. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  6. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  9. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

随机推荐

  1. IntelliJ IDEA 2017版 spring-boot2.0.2 自动配置Condition

    描述: 编译器修改参数      -Dfile.encoding=GBK     -Dstr.encoding=GBK Condition位置: 某一个类或注解存在的时候,装配,否则不装配 相关代码: ...

  2. Keras分类问题

    #-*- coding: utf-8 -*- #使用神经网络算法预测销量高低 import pandas as pd #参数初始化 inputfile = 'data/sales_data.xls' ...

  3. 理解-const

    c++ 中const和c中define的区别 (1) 编译器处理方式不同 define宏是在预处理阶段展开. const常量是编译运行阶段使用. (2) 类型和安全检查不同 define宏没有类型,不 ...

  4. Ng第十七课：大规模机器学习(Large Scale Machine Learning)

    17.1  大型数据集的学习 17.2  随机梯度下降法 17.3  微型批量梯度下降 17.4  随机梯度下降收敛 17.5  在线学习 17.6  映射化简和数据并行 17.1  大型数据集的学习 ...

  5. C#-.Net Framework和.Net Compact Framework-摘

    .Net Compact Framework 一种独立于硬件的环境,用于在资源受限制的计算设备上运行程序.它继承了公共语言运行时的完整 .NET Framework 结构,支持 .NET Framew ...

  6. DeepFace和GAN

    由于换脸技术的影响,现在造假视频的成本越来越低.AI换脸视频也越来越热门,甚至有一些已经达到了以假乱真的程度.虽然有明星反对表示无奈,可是.... 据报道,2018年,arXiv上发布了902篇GAN ...

  7. webService之helloword(web)

    spring 整合webservice pom.xml文件 <dependencies> <!-- CXF WS开发 --> <dependency> <gr ...

  8. 学习c++需要知道

    1.c++投入和经济产出比目前较低,c++很复杂,学习难度高.周期长.而且开发效率低. 2.但是c++趋紧于完美语言,它囊括了多种编程范型.它运行效率高,对计算机有着极致的控制能力.适用于低层. 3. ...

  9. 状态 ajax

    //html部分 <a href="#" data-status="{$vo.state}" data-urid="{$vo.id}" ...

  10. 本地Git与github连接/上传配置

    参照:http://www.runoob.com/w3cnote/git-guide.html 一.本地与githup连接配置1.本地创建ssh key: $ ssh-keygen -t rsa -C ...