Vue.js中V-for如何遍历数组以及 json_vue3 v-for 与json-CSDN博客

本文链接：https://blog.csdn.net/qq_37986384/article/details/82662645

数组遍历

其中{{$index}} 显示索引只能在Vue1.0中使用


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    
    <script src="vue-1.0.21.js"></script>
</head>
<body>
    <div id="app">
       
        <ul>
            <li v-for="item in arry">
                 {{item}}  {{$index}}

            </li>
        </ul>
    </div>

     <script>
         var Vm = new Vue({
             el: "#app",
             data: {
               
                 arry: ['aaa', 'bbb', 'ccc']
             }
         })
    </script>
</body>
</html>

在Vue2.0版本中需要遍历数组并且显示索引如图


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
   
</head>
<body>
    <div id="app">
       
        <ul>
            <li v-for="(item,index) in arry">
                 {{item}}  {{index}}

            </li>
        </ul>
    </div>

     <script>
         var Vm = new Vue({
             el: "#app",
             data: {
               
                 arry: ['aaa', 'bbb', 'ccc']
             }
         })
    </script>
</body>
</html>

展示如图：

JSON遍历


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
   
</head>
<body>
    <div id="app">
       
        <ul>
            <li v-for="(k,item) in  json">
                {{k}} {{item}} 


            </li>
        </ul>
    </div>

     <script>
         var Vm = new Vue({
             el: "#app",
             data: {
                 json: {a:"粉红豹",b:"哈喽凯瑞",c:"朵拉小梦"}
                
             }
         })
    </script>
</body>
</html>

展示如图：