Vuejs006---v-for 指令

最新推荐文章于 2023-12-29 08:00:00 发布

赵书正

最新推荐文章于 2023-12-29 08:00:00 发布

阅读量328

点赞数 1

分类专栏：前端框架 Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/rngigskt/article/details/119882029

版权

前端框架 Vue.js 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

（1）v-for 指令的基本使用

案例 1：遍历字符串数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
    
</head>
<body>
    
    <div id="app">
        
        <!-- 直接使用插值表达式 引用数组 通过下标展现所需元素 -->
        <!-- <p>{{cityList[0]}}</p>
        <p>{{cityList[1]}}</p>
        <p>{{cityList[2]}}</p>
        <p>{{cityList[3]}}</p>
        <p>{{cityList[4]}}</p> -->

        <!-- 
            
            使用v-for指令的形式遍历字符串数组 
        
            语法：元素 in 数组

        -->
        <!-- <p v-for="city in cityList">

            {{city}}

        </p> -->

        <!-- 在以上需求的基础上 遍历出所有的元素以及对应的下标 -->
        <p v-for="(city,i) in cityList">

            {{i}}--------------{{city}}

        </p>

    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : ["北京","上海","广州","深圳","沈阳"]

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

</body>
</html>

案例 2：遍历对象数组

<body>
    
    <div id="app">
        
        <!-- 每一次遍历出来的元素，代表一个城市信息对象 -->
        <p v-for="(city,i) in cityList" :key="city.id">

            <!-- 对象以  .属性名 的形式来取得属性值 -->
            {{i}}------------------{{city.id}}-----------{{city.name}}

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                cityList : [

                    {id:"A0001",name:"北京"},
                    {id:"A0002",name:"上海"},
                    {id:"A0003",name:"广州"},
                    {id:"A0004",name:"深圳"},
                    {id:"A0005",name:"沈阳"},

                ]

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

案例 3：遍历对象的属性和属性值

 <div id="app">
        
        <!--

            遍历对象的属性和属性值：
            必须以取出键值对的形式来遍历
            (value值(属性值),key键(属性名)) in 对象
            (value值(属性值),key键(属性名),i下标) in 对象

        -->
        <p v-for="(value,key,i) in city1">

            {{i}}-------------{{key}}------------{{value}}

        </p>        


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
                city1 : {id:"A0001",name:"北京"}

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>

案例 4：遍历整型数字

 <div id="app">
        
        <!--

            以 元素 in 整型数值

        -->
        <p v-for="count in 20">

            {{count}}

        </p>


    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                
               

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                
                

            }

        });

    </script>