6.Vue 循环语句

最新推荐文章于 2024-08-25 05:45:00 发布

九宫格输入法

最新推荐文章于 2024-08-25 05:45:00 发布

阅读量114

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Stubborn_bull/article/details/117927846

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

循环使用 v-for 指令。

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

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

<div id="app">
    <h2>列表遍历</h2>
    <ul>
        <li v-for="item in items">
            {{item.name}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            items:[
                {name:'北京'},
                {name:'南京'},
                {name:'东京'}
            ]
        }
    })
</script>

效果：
在这里插入图片描述

<h2>index索引参数</h2>
<ul>
    <li v-for="(item,index) in items">
        {{index}}-{{item.name}}
    </li>
</ul>

效果：
在这里插入图片描述

<div id="app">
    ......
    <hr>
    <h2>遍历对象</h2>
    <li v-for="value in object">
        {{ value }}
    </li>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            items:[
                {name:'北京'},
                {name:'南京'},
                {name:'东京'}
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
</script>

效果：
在这里插入图片描述

<h2>name键名参数</h2>
<li v-for="(value,name,index) in object">
    {{index}}-{{name}}-{{ value }}
</li>

效果：
在这里插入图片描述

<h2>迭代整数</h2>
<ul>
    <li v-for="n in 5">
        {{ n }}
    </li>
</ul>

效果：在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>列表遍历</h2>
    <ul>
        <li v-for="item in items">
            {{item.name}}
        </li>
    </ul>
    <hr>
    <h2>index索引参数</h2>
    <ul>
        <li v-for="(item,index) in items">
            {{index}}-{{item.name}}
        </li>
    </ul>
    <hr>
    <h2>遍历对象</h2>
    <li v-for="value in object">
        {{ value }}
    </li>
    <hr>
    <h2>name键名参数</h2>
    <li v-for="(value,name,index) in object">
        {{index}}-{{name}}-{{ value }}
    </li>
    <hr>
    <h2>迭代整数</h2>
    <ul>
        <li v-for="n in 5">
            {{ n }}
        </li>
    </ul>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            items:[
                {name:'北京'},
                {name:'南京'},
                {name:'东京'}
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            }
        }
    })
</script>
</body>
</html>