Vue之for循環

時間 2019-11-11

標籤 vue 循環简体版

原文原文鏈接

Vue中for循環的用法總結以下：html

1.基本用法 v-forvue

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'#box',  
                data:{  
                    arr:['apple','banana','orange','pear']  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <ul>  
            <li v-for="value in arr">  
                {{value}}  
            </li>  
        </ul>  
    </div>  
</body>  
</html>

結果：web

2.帶索引的用法json

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'#box',  
                data:{  
                    arr:['apple','banana','orange','pear']  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <ul>  
            <li v-for="value in arr">  
                {{value}}   {{$index}}  
            </li>  
        </ul>  
    </div>  
</body>  
</html>

描述：app

使用{{$index}}能夠提供索引spa

結果：scala

3.使用(k,y) in arrcode

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
  
    </style>  
    <script src="vue.js"></script>  
    <script>  
        window.onload=function(){  
            new Vue({  
                el:'#box',  
                data:{  
                    arr:['apple','banana','orange','pear'],  
                    json:{a:'apple',b:'banana',c:'orange'}  
                }  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="box">  
        <ul>  
            <li v-for="value in arr">  
                {{value}}   {{$index}}  
            </li>  
        </ul>  
        <hr>  
        <ul>  
            <li v-for="value in json">  
                {{value}}   {{$index}}  {{$key}}  
            </li>  
        </ul>  
  
        <hr>  
        <ul>  
            <li v-for="(k,v) in json">  
                {{k}}   {{v}}   {{$index}}  {{$key}}  
            </li>  
        </ul>  
    </div>  
</body>  
</html>

描述：htm

{{k,v}} in arr k表明key, v表明valueblog

結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。