zoukankan      html  css  js  c++  java
  • vue(11)v-for循环指令

    1.v-for循环数组

    <template>
        <div>
         <ul>
             <li v-for="item in list" :key="item">//遍历list,每个item生成一个li元素,key作为唯一标识符,加上key的好处是如果list中的数据变化时在渲染的时候只需要改变变化的dom,不然就需要全部list生成的dom都要重新渲染
                 {{item}}
             </li>
              <li v-for="(item,index) in list" :key="item">//(item,index),item为list中元素的值,index为下标
                 {{item}}-{{index}}
             </li>
         </ul>
        </div>
    </template>

    <script>
    export default {
       name:"App",
       data:function(){
           return {
             list:['a','b','c']
           };
       },
       computed:{
           
       },
       methods:{
          
       }
    }
    </script>

    <style scoped>
    </style>
     
    2.v-for循环对象
    <template>
        <div>
         <ul>
              <li v-for="(item) in student" :key="item">//遍历student对象中每个属性的值
                 {{item}}
             </li>
              <li v-for="(item,key,index) in student" :key="item">//key为每个属性的名称,index为属性的序号
                 {{index}}.{{key}}:{{item}}
             </li>
         </ul>
        </div>
    </template>

    <script>
    export default {
       name:"App",
       data:function(){
           return {
             student:{
                 name:'halo',
                 age:20,
                 sex:'male'
             }
           };
       },
       computed:{
           
       },
       methods:{
          
       }
    }
    </script>

    <style scoped>
    </style>
     
    3.遍历的每个item可以作为参数传入到元素的事件方法中
    <template>
        <div>
         <ul>
             <li v-for="(item) in student" :key="item" @click="click(item)">//将item作为click方法的参数传入定义的方法内执行
                 {{item}}
             </li>
            
         </ul>
        </div>
    </template>

    <script>
    export default {
       name:"App",
       data:function(){
           return {
             student:{
                 name:'halo',
                 age:20,
                 sex:'male'
             }
           };
       },
       computed:{
           
       },
       methods:{
          click:function(data){
              console.log(data);
          }
       }
    }
    </script>

    <style scoped>
    </style>
  • 相关阅读:
    Python中CreateCompatibleDC和CreateBitmap造成的内存泄漏
    POJ 2420 模拟退火
    LR(1)分析表-语法树-四元式
    C语言文法
    计蒜客 18018 热爱工作的蒜蒜 最短路+dp
    HDU 5988 最小费用流
    POJ 1808 平方剩余
    POJ 2115 单变元模线性方程
    计蒜客 17414 Exponial 指数降幂公式
    计蒜客 17412 Card Hand Sorting 最长公共子序列
  • 原文地址:https://www.cnblogs.com/maycpou/p/14701884.html
Copyright © 2011-2022 走看看