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. BaseDao+万能方法 , HibernateDaoSupport

    package dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStat ...

  2. 使用robotframework做接口测试二——处理响应数据

    初使用RequestsLibrary做接口测试时,你会不会感到困惑,为什么会有${resp.content}, ${resp.status_code}这样的写法,这个status_code什么鬼,f5 ...

  3. 深入理解java：4.3.1. 框架编程之MyBatis---SQL语句执行的完整流程

    Mybatis的整个的执行流程.如下图所示: 原理详解: MyBatis应用程序根据XML配置文件创建SqlSessionFactory, SqlSessionFactory在根据配置,配置来源于两个 ...

  4. [转帖]RPM的原理及rpm命令常用参数

    RPM的原理及rpm命令常用参数 2015年09月14日 15:39:43 lose_wait 阅读数 1298 https://blog.csdn.net/u012012939/article/de ...

  5. Oracle数据块

    最小单位的输入\输出 数据块由操作系统中的一个或多个块组成 数据库是表空间的基本单位 DB_BLOCK_SIZE 查看 Oracle 块的大小语句: SQL> show parameter db ...

  6. 数据库索引 B+树

    问题1.数据库为什么要设计索引?索引类似书本目录,用于提升数据库查找速度.问题2.哈希(hash)比树(tree)更快,索引结构为什么要设计成树型?加快查找速度的数据结构,常见的有两类:(1)哈希,例 ...

  7. 导出excel-NPOI

    前台调用: view: <a href='/Admin/NurseUser/Excel' target='_blank'>导出Excel</a>或js: window.loca ...

  8. java知识点复习(1):

    1.java整形变量078:在java数字里数字表达式前面加上0表示8进制,因为8进制里表示数字只有0-7,所以这里的表达式有错误.相对而言,077就是合法的,转换成10进制就是63(7*8+7=63 ...

  9. 帝国cms 描述和关键词动态获取

    之前列表页首页和内容页调用的关键词和描述的字段不一样,所以说需要写好几套模板. 下边这个判断就不用像之前做几套模板了,通过判断获取不一样的字段. $GLOBALS[navinfor] 这个判断的是此页 ...

  10. WPF：元素绑定

    到目前为止都在讨论如何链接两个元素的绑定.但在数据驱动的应用程序中,更常见的情况是创建从不可见的对象中提取数据绑定表达式.唯一的要求是希望显示的信息必须存储在公有的属性中.WPF数据绑定基础结构不能获 ...