vue自定义组件和列表循环--vue学习笔记

	<div id="app">
		<shaoyou v-for='item in listData' v-bind:myProps='item' v-bind:key='item.id'>
		</shaoyou>
		<button type="button" @click='add' name="button">Add</button>
	</div>
	Vue.component(
		'shaoyou', {
			props: ['myProps'],
			template: '<p>{{ item.id +".  "+ item.text }}</p>'
		}
	)

	var app = new Vue({
		el: '#app',
		data: {
			listData: [{
				id: 0,
				text: '我会把手揣进裤兜'
			}, {
				id: 1,
				text: '走到玉林路的尽头'
			}, ],
		},
		methods:{
			add:function(){
				app.listData.push({id: '新增',
				text: '走过小酒馆的门口'})
			},
		},
	})

这里写图片描述

发布了97 篇原创文章 · 获赞 25 · 访问量 16万+

猜你喜欢

转载自blog.csdn.net/Qinhaolei/article/details/77914794