zoukankan      html  css  js  c++  java
  • vue 列表渲染 v-for循环

    v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合。

    1、这里演示一下遍历数组的基本用法,代码如下

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <script type="text/javascript"  src="vue.js"></script>
     7 </head>
     8 <body>
     9     <div id="id">
    10         <p v-for="arr in array">
    11             {{arr.course  }}
    12             {{arr.name}} 
    13         </p>
    14     </div>
    15 </body>
    16 <script>
    17     var vm = new Vue({
    18         el:"#id",
    19         data:{
    20             array:[
    21                 {course:'java'},
    22                 {course:'Vue.js'},
    23                 {course:'javaScript'},
    24                 {name:'曹操'},
    25                 {name:'孙权'},
    26                 {name:'刘备'}
    27             ]
    28         }
    29     })
    30 </script>
    31 </html>

    结果:

    在控制台里,输入 id.array.push({ course: '新课程' }),你会发现列表中添加了一个新课程

    2、在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <script type="text/javascript"  src="vue.js"></script>
     7 </head>
     8 <body>
     9     <ul id="app">
    10         <li v-for="(p, index) in people"> <!--添加索引-->
    11             {{ parentMessage }} --- {{ index }} --- {{ p.name }}
    12             <!--访问父作用域属性parentMessage-->
    13         </li>
    14     </ul>
    15 </body>
    16     <script>
    17     var vm = new Vue({
    18         el:"#app",
    19         data:{
    20             parentMessage: '罗贯中',
    21             people: [
    22                 {name:'曹操'},
    23                 {name:'孙权'},
    24                 {name:'刘备'}
    25             ]
    26          }
    27     })
    28 </script>
    29 </html>

    输出结果:

    备注:<div v-for="item of items"></div>   用of 代替 in 也是合法的

     3、对象迭代 v-for

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <script type="text/javascript"  src="vue.js"></script>
     7 </head>
     8 <body>
     9     <ul id="app">
    10         <li v-for="(value,key,index) of object"> <!--添加索引-->
    11            {{parentMessage}}---{{key}}{{value}}---{{index}}
    12         </li>
    13     </ul>
    14 </body>
    15     <script>
    16     var vm = new Vue({
    17         el:"#app",
    18         data:{
    19             parentMessage: '施耐庵',
    20             object: {
    21                 浪子:'燕青',
    22                 花和尚:'鲁智深',
    23                 鼓上骚:'时迁'
    24             }
    25          }
    26     })
    27 </script>
    28 </html>

    输出结果:

    4、整数迭代 v-for  

    <div>
      <span v-for="n in 10">{{ n }}</span>
    </div>
  • 相关阅读:
    Codeforces 1316B String Modification
    Codeforces 1305C Kuroni and Impossible Calculation
    Codeforces 1305B Kuroni and Simple Strings
    Codeforces 1321D Navigation System
    Codeforces 1321C Remove Adjacent
    Codeforces 1321B Journey Planning
    Operating systems Chapter 6
    Operating systems Chapter 5
    Abandoned country HDU
    Computer HDU
  • 原文地址:https://www.cnblogs.com/dyfbk/p/6861346.html
Copyright © 2011-2022 走看看