Vue组件实例

Author：傻猫
发布时间：June 14, 2020
1210views
No comments
798 words
Categories：搞软件

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>