Loading... 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> 相关文章 Vue过滤器实例:输入字符串将首写字母转换为大写 Vue学习笔记(一) Vue 2.0 周期函数列表及作用详解 js分析页面停留时间及来源 JS使用setInterval或setTimeout隔几秒后跳转页面 jQuery带提示的ajax删除数据 jQuery解决checkbox未选中不提交值的问题 jQuery switchery 类似IOS的开关按钮使用 DataTables 高级配置参数 JQuery DataTables 基本配置 Last modification:June 14th, 2020 at 10:35 pm © 允许规范转载 Support 如果觉得我的文章对你有用,请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat