• 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>
  • 相关阅读:
    Android TabHost(选项卡)
    监控工具之---Prometheus查询持久性(六)
    监控工具之---Prometheus表达式promQL生产中应用(五)
    Grafana Configuration 参数详解(1)
    监控工具之---Prometheus数据可视化Grafana(七)
    监控工具之---Prometheus 安装详解(三)
    监控工具之---Prometheus 配置exporter四)
    Kubernetes容器编排技术---kubectl命令行工具用法详解(三)
    Kubernetes容器编排技术---Kubernetes基于kubeadm安装与配置(二)
    Azure Iaas基础之---创建虚拟机
  • 原文地址:https://www.cnblogs.com/maycpou/p/14701884.html
Copyright © 2020-2023  润新知