vue.js循环语句

vue.js循环语句

  • 循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组, site 是数组元素迭代的别名。

  • v-for 可以绑定数据到数组来渲染一个列表：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue.js循环语句</title>
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <ol>
                <li v-for="site in sites">
                    {{site.name}}
                </li>
            </ol>
        </div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
            sites: [
                {name: 'Baidu'},
                {name: 'Google'},
                {name: 'Taobao'}
            ]
        }
    })
    </script>
</html>
  • 模板中使用 v-for：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue.js循环语句</title>
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <template>
                <li v-for="site in sites">
                    {{site.name}}
                </li>
            </template>
        </div>
    </body>
    <script>
    new Vue({
        el: '#app',
        data: {
            sites: [
                {name: 'Baidu'},
                {name: 'Google'},
                {name: 'Taobao'}
            ]
        }
    })
    </script>
</html>

v-for迭代对象

  • v-for可以通过一个对象的属性来迭代数据
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>loop object of vue</title>
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-for="value in Object">
                {{value}}
            </div>
        </div>
        <script>
        new Vue({
            el: '#app',
            data: {
                Object: {
                    name:'baidu',
                    url: 'www.baidu.com',
                    slogan: '搜素引擎'
                }
            }
        })
        </script>
    </body>
</html>
  • 也可以提供第二个的参数为键名：
        <div id="app">
                <div v-for="(value, key) in Object">
                        {{key}} : {{value}}
                </div>
        </div>
  • 也可以提供第三个参数为索引：
<li v-for="(value, key, index) in Object">
    {{ index }}. {{ key }} : {{ value }}
</li>

v-for 迭代整数

  • v-for 也可以循环整数
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>loop object of vue</title>
        <script src="vue.min.js"></script>
    </head>
    <body>
        <div id="app">
                <ul>
                    <li v-for="n in 10">
                        {{n}}
                    </li>
                </ul>
        </div>
        <script>
        new Vue({
            el: '#app'
        })
        </script>
    </body>
</html>
posted @ 2017-09-30 14:17  sinceForever  阅读(236)  评论(0)  编辑  收藏  举报