Vue之for循环

来源：互联网发布：centos修改ip地址编辑：程序博客网时间：2024/06/10 10:47

Vue中for循环的用法总结如下：

1.基本用法 v-for

<!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>

结果：

2.带索引的用法

<!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>

描述：

使用{{$index}}可以提供索引

结果：

3.使用(k,y) in arr

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>智能社——http://www.zhinengshe.com</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>

描述：

{{k,v}} in arr k代表key, v代表value

结果：

阅读全文

1 0