Vue组件实例

博主： samool
发布时间：2020 年 06 月 14 日
4528 次浏览
暂无评论
798字数
分类：搞软件

Vue组件实例，采用v-for循环输出内容

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <blog-post v-for="post in posts" :key="post.id" :title="post.title" :author="post.author" :description="post.description"></blog-post>
        </div>
        <script>
            Vue.component('blog-post', {
                props: ['id', 'title', 'author', 'description'],
                template: '<div><h3>{{ title }}</h3><span>作者: {{ author }}</span><div>{{ description }}</div></div>'
            })

            var vm = new Vue({
                el: '#app',
                data: {
                    posts: [{
                            id: 1,
                            title: '文章1',
                            author: 'Loen',
                            description: "111111"
                        },
                        {
                            id: 2,
                            title: '文章2',
                            author: 'Kelly',
                            description: "222222"
                        },
                        {
                            id: 3,
                            title: '文章3',
                            author: 'Nier',
                            description: "333333"
                        }
                    ]
                }
            });
        </script>
    </body>
</html>