v-for循环

最新推荐文章于 2024-05-14 10:23:17 发布

吃瓜的阳大王

最新推荐文章于 2024-05-14 10:23:17 发布

阅读量194

点赞数

分类专栏：从零开始学习VUE 文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/105055225

版权

从零开始学习VUE 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

语法：v-for((item.index) in 循环体)

item是循环的内容 index是下标

:key=“item.id” 指明唯一id提高程序效率

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
</head>

<body>
    <div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for="item in fruits">
                {{item}}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in fruits">
                {{item +'---'+index}}
            </li>
        </ul>
        <ul>
            <li :key="item.id" v-for="(item,index) in myFruits">
                <span>{{item.ename}}</span>
                <span>{{item.cname}}</span>
            </li>
        </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: ['apple', 'orange', 'banana'],
                myFruits: [{
                        id: 1,
                        ename: 'apple',
                        cname: '苹果'
                    },
                    {
                        id: 2,
                        ename: 'orange',
                        cname: '橘子'
                    }, {
                        id: 3,
                        ename: 'banana',
                        cname: '香蕉'
                    }
                ]
            }
        })
    </script>
</body>

</html>

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for循环

语法：v-for((item.index) in 循环体)item是循环的内容 index是下标<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
复制链接

扫一扫