VueJS之循环输出

最新推荐文章于 2024-08-29 10:58:51 发布

GaloisAlex

最新推荐文章于 2024-08-29 10:58:51 发布

阅读量1.3k

点赞数 2

分类专栏：前端框架 Vue 文章标签： Vue Vue遍历 Vue循环遍历 VueJS

本文链接：https://blog.youkuaiyun.com/qq_42110976/article/details/96486896

版权

前端框架同时被 2 个专栏收录

3 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

数据准备：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            foods : ['Python','Laravel','VueJS'],
            posts : [
                {id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
                {id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
                {id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
            ]
        }
    });
</script>
</body>
</html>

列表遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="food in foods">{{ food }}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            foods : ['Python','Laravel','VueJS'],
            posts : [
                {id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
                {id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
                {id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
            ]
        }
    });
</script>
</body>
</html>

模块遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <div class="post" v-for="post in posts">
        <h3>{{ post.title }}</h3>
        <p>{{ post.body }}</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            foods : ['Python','Laravel','VueJS'],
            posts : [
                {id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
                {id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
                {id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
            ]
        }
    });
</script>
</body>
</html>

循环之LoopIndex：

<div class="post" v-for="(post,index) in posts">
    <h3>{{ post.title }}<span v-if="index === 0" style="color:orangered">今日头条</span></h3>
    <p>{{ post.body }}</p>
</div>

Json数据的遍历：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gamacode.com</title>
</head>
<body>
<div id="app">
    <div v-for="(value,property) in courses">
        <h3>{{ property }}</h3>
        <p>{{ value }}</p>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            loaded: false,
            posts : null,
            courses : {
                Python : '编程语言',
                Laravel : 'PHP框架',
                Vue : '前端三巨头之一',
            }
        }
    });
</script>
</body>
</html>