1.v-for循环普通数组

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

        <!--  <p>{{list[0]}}</p>

         <p>{{list[1]}}</p>

         <p>{{list[2]}}</p>

         <p>{{list[3]}}</p>

         <p>{{list[4]}}</p> -->

         <p v-for="(item,i) in list">索引值：{{i}}---每一项：{{item}}</p>

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           list:[1,2,3,4,5,6]

         },

         methods:{}

           });

       </script>

   </body>

 </html>

2.v-for循环对象数组

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

     <div id="app">

       <p v-for="(user,i) in list">Id：{{user.id}}---名字：{{user.name}}---索引：{{i}}</p>

     </div>

     <script>

       //创建 Vue 实例，得到 ViewModel

       var vm =  new Vue({

         el:'#app',

         data:{

           list:[

              {id:1,name:'zs1'},

              {id:2,name:'zs2'},

              {id:3,name:'zs3'},

              {id:4,name:'zs4'}

           ]

         },

         methods:{}

       });

     </script>

   </body>

 </html>

3.v-for循环对象

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

       <!--注意：在遍历对象身上的键值对的时候，除了有val key ，在第三个位置还有一个索引-->

       <p v-for="(val,key,i) in  user">值是：{{val}}---键是：{{key}}---索引{{i}}</p>

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           user:{

             id:1,

             name:'安迪',

             gender:'男'

           }

         },

         methods:{}

           });

       </script>

   </body>

 </html>

4.v-for迭代数字

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>Document</title>

     <!--1.导入Vue的包-->

     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

   </head>

   <body>

       <div id="app">

      <!-- in后面我们放过普通数组，对象数组，对象，还可以放数字 -->

      <!--  注意：如果使用v-for迭代数字的话，前面的count值从1开始 -->

       <p v-for="count in 10">这是第{{count}}次循环</p>

       </div>

       <script>

           //创建 Vue 实例，得到 ViewModel

           var vm =  new Vue({

               el:'#app',

         data:{

           msg:''

         },

         methods:{}

           });

       </script>

   </body>

 </html>

第二章 Vue快速入门-- 17 v-for指令的四种使用方式的更多相关文章

  1. 第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. 第二章 Vue快速入门-- 28 自定义按键修饰符

    事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 第二章 Vue快速入门-- 27 字符串的padStart方法使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 【JVM学习笔记】类加载过程

    在Java代码中,类型的加载.连接与初始化过程都是在程序运行期间完成的:提供了更大的灵活性,增加了更多的可能性 JVM启动过程包括:加载.连接.初始化 加载:就是将class文件加载到内存.详细的说是 ...

  2. extentreports 测试报告引用extend.js/css失败

    测试工程引用extentreports 生成的测试报告,因为报告中的js和css网络不通,所以页面乱码 解决思路: 下载需要的js.css放到测试工程的static目录下 下载extentreport ...

  3. 比较Json.Net和fastJson的效率

    var zoo1 = new zoo(); zoo1.animals = new List<animal>(); zoo1.animals.Add(new cat()); zoo1.ani ...

  4. Python浅拷贝与深拷贝（可变对象与不可变对象）

    第一次遇到深拷贝和浅拷贝的问题是用python在一个for循环中对一个list赋值,使用的语句是 a = b 这个b会不断带入循环,每次计算得到,最后发现list乱七八糟的,后来才发现,python中 ...

  5. docker中tomcat日志输出自定义

    一,默认tomcat日志配置文件 /data/tomcat/conf/logging.properties 1,修改tomcat/conf下的logging.properties [root@harb ...

  6. 【linux杂谈】遇到REMOTE HOST IDENTIFICATION HAS CHANGED怎么办？

    今日遇到如下问题: 警告的大概意思就是,主机密钥发生变更,并提示安全风险(可能存在中间人攻击) 但是事实是,这是因为我重装系统之后遇到的问题.重装系统后,指纹当然会发生变化了...在Xshell实验中 ...

  7. java学习-3

    输入语句Scanner的使用方法 1.导包 import java.util.Scanner 2.创建 从键盘输入:Scanner sc = new Scanner(System.in); 3.使用 ...

  8. hadoop3.1.2队列

    hapood3.1.2 capacity-scheduler.xml CDH6.2 在配置中输入fair,转成json格式看. yarn资源池配置: CDH--yarn--动态资源池配置 pool_d ...

  9. Oracle密码过期（the password has expired）

    1.进入sqlplus模式--sqlplus / as sysdba; 2.查看用户密码的有效期设置(一般默认的配置文件是DEFAULT) SELECT * FROM dba_profiles WHE ...

  10. 【Python】【demo实验2】【打印乘法口诀表】

    打印乘法口诀表 源代码: # encoding=utf-8 for i in range(1,10): print("\n") for j in range(1,10): if i ...